<div>
    <table class="table table-bordered table-responsive table-striped">
        <thead>
        <tr>
            <th translate>Default</th>
            <th translate>Realm name</th>
            <th translate>resolvers</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="(realmname, realm) in realms">
            <td>
                <span class="glyphicon glyphicon-ok"
                      ng-show="realm.default"></span>
                <button class="btn btn-success"
                        ng-hide="realm.default"
                        ng-click="setDefaultRealm(realmname)"
                        translate>set Default
                </button>

            </td>
            <td>
                {{ realmname }}
            </td>
            <td>
                <span ng-hide="editRealm == realmname">
                    <span ng-repeat="reso in realm.resolver">
                        <a ui-sref="config.resolvers.edit{{ reso.type }}
                            ({resolvername:reso.name})">
                            {{ reso.name }}</a>
                        [{{ reso.priority }}]
                         ({{ reso.type }})<br>
                    </span>
                </span>
                <span ng-show="editRealm == realmname">
                    <!-- TODO: Hieraus eine component bauen!-->
                    <span  ng-repeat="resolver in resolvers">
                        <label for="{{ resolver.resolvername }}">
                            <input type="checkbox"
                                   ng-model="selectedResolvers[resolver.resolvername].selected"
                                   name="group"
                                   id="{{ resolver.resolvername }}"
                                   ng-checked="selectedResolvers[resolver.resolvername].selected">
                            {{ resolver.resolvername }}
                            <input type="number" size="3" width="3ex"
                                   max="999" min="1"
                                   ng-show="selectedResolvers[resolver.resolvername].selected"
                                   ng-model="selectedResolvers[resolver.resolvername].priority"
                                   placeholder="priority" />
                            ({{ resolver.type }})
                        </label><br>
                    </span>
                </span>

            </td>
            <td>
                <span ng-hide="editRealm">
                <button class="btn btn-primary"
                        ng-click="startEdit(realmname, realm)"
                        translate>Edit
                </button>
                <button class="btn btn-danger"
                        ng-click="delRealm(realmname)">
                        <span class="glyphicon glyphicon-trash"></span>
                        <span translate>Delete</span>
                </button>
                </span>
                <span ng-show="editRealm == realmname">
                    <button class="btn btn-primary"
                            ng-click="setRealm(realmname)"
                            translate>Save
                    </button>
                    <button class="btn btn-danger"
                            ng-click="cancelEdit()"
                            translate>Cancel
                    </button>
                </span>
            </td>
        </tr>
        <form name="formNewRealm" role="form" validate>

            <tr ng-hide="editRealm">
                <td>
                </td>
                <td>
                    <div class="form-group">
                        <input name="realmname" id="realmname"
                               class="form-control"
                               ng-model="realm.name" required
                               placeholder="{{ 'new realm'|translate }}"
                               autofocus/>
                    </div>
                </td>
                <td>
                    <span  ng-repeat="resolver in resolvers">
                        <label for="{{ resolver.resolvername }}">
                            <input type="checkbox"
                                   ng-model="selectedResolvers[resolver.resolvername].selected"
                                   name="group"
                                   id="{{ resolver.resolvername }}">
                            {{ resolver.resolvername }}
                            <input type="number" size="3" width="3ex"
                                   max="999" min="1"
                                   ng-show="selectedResolvers[resolver.resolvername].selected"
                                   ng-model="selectedResolvers[resolver.resolvername].priority"
                                   placeholder="priority" />
                            ({{ resolver.type }})
                        </label><br>
                    </span>
                </td>
                <td>
                    <span ng-hide="editRealm">
                    <button ng-click="setRealm(realm.name)"
                            ng-disabled="formNewRealm.$invalid"
                            class="btn btn-primary" translate>Create realm
                    </button>
                    </span>
                </td>
            </tr>
        </form>

        </tbody>
    </table>

    <!--
    <pre ng-bind="selectedResolvers | json"></pre>
    -->

</div>
