<div class="bs-sidebar col-sm-3 " data-ng-include data-src="resourceUrl + '/partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main">
    <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#/realms/{{realm.realm}}/users">User List</a></li>
        <li class="active"><a href="">Federation</a></li>
    </ul>
    <h2></h2>
    <div id="content">
        <h2><span>{{realm.realm}}</span> User Federation Providers</h2>

        <table class="table table-striped table-bordered">
            <thead>
            <tr ng-show="providers.length > 0 && access.manageUsers">
                <th colspan="3" class="kc-table-actions">
                    <div class="pull-right">
                        <div class="select-kc">
                            <select 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>
            </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>
             </tr>
            <tr data-ng-show="!instances || instances.length == 0">
                <td>No user federation providers configured</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>