<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <kc-tabs-group-list></kc-tabs-group-list>

    <form class="form-horizontal" name="realmForm" novalidate>
        <div class="form-group" kc-read-only="!access.manageRealm">
            <label class="col-md-1 control-label" class="control-label"></label>

            <div class="col-md-8" >
                <div class="row">
                    <div class="col-md-5">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th class="kc-table-actions" colspan="5">
                                    <div class="form-inline">
                                        <label class="control-label">{{:: 'default-groups' | translate}}</label>
                                        <kc-tooltip>{{:: 'default-groups.tooltip' | translate}}</kc-tooltip>

                                        <div class="pull-right" data-ng-show="access.manageRealm">
                                            <button id="removeDefaultGroup" class="btn btn-default" ng-click="removeDefaultGroup()">{{:: 'remove' | translate}}</button>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <select id="defaultGroups" class="form-control" size=5
                                            ng-model="selectedGroup"
                                            ng-options="r.path for r in defaultGroups">
                                        <option style="display:none" value="">{{:: 'select-a-type.placeholder' | translate}}</option>
                                    </select>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-5">
                        <table class="table table-striped table-bordered" style="margin-bottom: 0">
                            <thead>
                            <tr>
                                <th class="kc-table-actions" colspan="5">
                                    <div class="form-inline">
                                        <div>
                                            <label class="control-label">{{:: 'available-groups' | translate}}</label>
                                            <kc-tooltip>{{:: 'available-groups.tooltip' | translate}}</kc-tooltip>
                                        </div>
                                        <div class="pull-left">
                                            <div class="input-group">
                                                <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
                                                <div class="input-group-addon">
                                                    <i class="fa fa-search" id="groupSearch" ng-click="searchGroup()"></i>
                                                </div>
                                            </div>
                                        </div>
                                        &nbsp;
                                        <button id="viewAllGroups" class="btn btn-default" ng-click="clearSearch()">{{:: 'view-all-groups' | translate}}</button>
                                        <div class="pull-right" data-ng-show="access.manageRealm">
                                            <button id="addDefaultGroup" class="btn btn-default" ng-click="addDefaultGroup()">{{:: 'add' | translate}}</button>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div
                                            tree-id="tree"
                                            angular-treeview="true"
                                            tree-model="groupList"
                                            node-id="id"
                                            node-label="name"
                                            node-children="subGroups" >
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div style="margin-bottom: 50px">
                            <kc-paging current-page="currentPage" number-of-pages="numberOfPages" current-page-input="currentPageInput"></kc-paging>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<kc-menu></kc-menu>
