<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h1>
        <span>User Federation</span>
    </h1>

    <table class="table table-striped table-bordered">
        <thead>
        <tr ng-show="providers.length > 0 && access.manageUsers">
            <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...</option>
                        </select>
                    </div>
                </div>
            </th>
        </tr>
        <tr data-ng-show="instances && instances.length > 0">
            <th>ID</th>
            <th>Provider Name</th>
            <th>Priority</th>
            <th colspan="2">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="instance in instances">
            <td><a href="#/realms/{{realm.realm}}/user-federation/providers/{{instance.providerName}}/{{instance.id}}">{{instance.displayName}}</a></td>
            <td>{{instance.providerName|capitalize}}</td>
            <td>{{instance.priority}}</td>
            <td class="kc-action-cell">
                <button class="btn btn-default btn-block btn-sm" kc-open="/realms/{{realm.realm}}/user-federation/providers/{{instance.providerName}}/{{instance.id}}">Edit</button>
            </td>
            <td class="kc-action-cell">
                <button class="btn btn-default btn-block btn-sm" data-ng-click="removeUserFederation(instance)">Delete</button>
            </td>
         </tr>
        <tr data-ng-show="!instances || instances.length == 0">
            <td class="text-muted">No user federation providers configured</td>
        </tr>
        </tbody>
    </table>
</div>

<kc-menu></kc-menu>