<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h1>
        <span>{{:: 'user-federation' | translate}}</span>
    </h1>

    <div class="blank-slate-pf" data-ng-hide="!instancesLoaded || (instances && instances.length > 0)">
        <div class="blank-slate-pf-icon">
            <span class="fa fa-database"></span>
        </div>
        <h1>
            {{:: 'user-federation' | translate}}
        </h1>
        <p>Keycloak can federate external user databases. Out of the box we have support for LDAP and Active Directory.</p>
        <p>To get started select a provider from the dropdown below:</p>
        <div class="blank-slate-pf-main-action">
            <div class="row" data-ng-show="access.manageRealm">
                <div class="col-sm-4 col-sm-offset-4">
                    <div class="form-group">
                        <select class="form-control" ng-model="selectedProvider"
                                ng-options="p.id for p in providers"
                                data-ng-change="addProvider(selectedProvider); selectedProvider = null">
                            <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <table class="table table-striped table-bordered" data-ng-show="instances && instances.length > 0">
        <thead>
            <tr ng-show="providers.length > 0 && access.manageRealm">
                <th colspan="5" class="kc-table-actions">
                    <div class="pull-right">
                        <div>
                            <select class="form-control" ng-model="selectedProvider"
                                    ng-options="p.id for p in providers"
                                    data-ng-change="addProvider(selectedProvider); selectedProvider = null">
                                <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
                            </select>
                        </div>
                    </div>
                </th>
            </tr>
            <tr data-ng-show="instances && instances.length > 0">
                <th>{{:: 'id' | translate}}</th>
                <th>{{:: 'enabled' | translate}}</th>
                <th>{{:: 'provider-name' | translate}}</th>
                <th>{{:: 'priority' | translate}}</th>
                <th colspan="2">{{:: 'actions' | translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="instance in instances">
                <td><a href="#{{getInstanceLink(instance)}}">{{getInstanceName(instance)}}</a></td>
                <td>{{isProviderEnabled(instance)}}</td>
                <td>{{getInstanceProvider(instance) | capitalize}}</td>
                <td>{{getInstancePriority(instance)}}</td>
                <td class="kc-action-cell" kc-open="{{getInstanceLink(instance)}}">{{:: 'edit' | translate}}</td>
                <td class="kc-action-cell" data-ng-click="removeInstance(instance)">{{:: 'delete' | translate}}</td>
            </tr>
            <tr data-ng-show="!instances || instances.length == 0">
                <td class="text-muted">{{:: 'no-user-federation-providers-configured' | translate}}</td>
            </tr>
        </tbody>
    </table>
</div>

<kc-menu></kc-menu>