<div class="content-container" ng-controller="ExternalServicesController">
    <ul class="breadcrumb">
        <li><a href="#/system">{{'label.anchor.system' | translate}}</a></li>
        <li class="active">{{'label.anchor.externalServices' | translate}}</li>
    </ul>

    <div class="card">
        <div class="content">
            <div class="row">
                <div class="col-sm-6 col-md-6">
                    <div class="list-group">
                        <a class="list-group-item" has-permission="READ_CONFIGURATION" href="#/externalservices/S3">
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-cloud"></i>&nbsp;&nbsp;{{'label.anchor.externalServices'
                                | translate}}</h4>
                                <p class="list-group-item-text">{{'label.S3.description' | translate}}</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="list-group">
                            <a class="list-group-item" has-permission="READ_CONFIGURATION" href="#/externalservices/SMTP">
                                <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-envelope"></i>&nbsp;&nbsp;{{'label.anchor.externalServices'
                                    | translate}}</h4>
                                    <p class="list-group-item-text">{{'label.SMTP.description' | translate}}</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
          
        <div class="content">
            <div class="row">
                <div class="col-sm-6 col-md-6">
                    <div class="list-group">
                        <a class="list-group-item" has-permission="READ_CONFIGURATION" href="#/externalservices/SMS">
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-envelope"></i>&nbsp;&nbsp;{{'label.anchor.externalServices'
                                | translate}}</h4>
                            <p class="list-group-item-text">{{'label.SMS.description' | translate}}</p>
                        </a>
                    </div>
                </div>                
                <div class="col-sm-6 col-md-6">
                        <div class="list-group">
                            <a class="list-group-item" has-permission="READ_CONFIGURATION" href="#/externalservices/NOTIFICATION">
                                <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-envelope"></i>&nbsp;&nbsp;{{'label.anchor.externalServices'
                                    | translate}}</h4>
                                    <p class="list-group-item-text">{{'label.NOTIFICATION.description' | translate}}</p>
                                </a>
                            </div>
                        </div>
                <div class="col-sm-6 col-md-6">
                    <div class="list-group">
                        <a class="list-group-item" has-permission="READ_CONFIGURATION" href="#/externalservicesCB/CreditBureau">
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-institution"></i>&nbsp;&nbsp;{{'label.anchor.externalServices'
                                | translate}}</h4>
                            <p class="list-group-item-text">{{'label.CreditBureau.description' | translate}}</p>
                        </a>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>


