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

    <table class="table table-striped table-bordered">
        <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>{{:: '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="#/realms/{{realm.realm}}/user-storage/providers/{{instance.providerId}}/{{instance.id}}">{{instance.name}}</a></td>
            <td>{{instance.providerId|capitalize}}</td>
            <td>{{instance.config['priority'][0]}}</td>
            <td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/user-storage/providers/{{instance.providerId}}/{{instance.id}}">{{:: 'edit' | translate}}</td>
            <td class="kc-action-cell" data-ng-click="removeUserStorage(instance)">{{:: 'delete' | translate}}</td>
         </tr>
        <tr data-ng-show="!instances || instances.length == 0">
            <td class="text-muted">{{:: 'no-user-storage-providers-configured' | translate}}</td>
        </tr>
        </tbody>
    </table>
</div>

<kc-menu></kc-menu>