<div ng-show="loading < 1">
    <div class="modal-header">
        <h3 class="modal-title" translate>PASSWORD_GROUP_MANAGEMENT.EDIT_PASSWORD_GROUP_PERMISSIONS</h3>
    </div>

    <form name="modalForm" class="form-horizontal">
        <div class="modal-body">
            <ul class="nav nav-pills pb-3">
                <li class="nav-item"><a href="" class="nav-link" ng-click="nav = null" ng-class="{active:nav == null}">{{'WORDS.USER_PERMISSIONS'|translate}}</a></li>
                <li class="nav-item"><a href="" class="nav-link" ng-click="nav = 1" ng-class="{active:nav == 1}">{{'WORDS.GROUP_PERMISSIONS'|translate}}</a></li>
            </ul>

            <div ng-show="nav == null">
                <script type="text/ng-template" id="userTypeaheadTemplate.html">
                    <a class="typeahead-supporter dropdown-item">
                        <span ng-bind-html="match.model.full_name | uibTypeaheadHighlight:query"></span>
                        <br />
                        <span ng-bind-html="match.model.email | uibTypeaheadHighlight:query"></span>
                    </a>
                </script>

                <div class="alert alert-warning" ng-show="showOwnUserError">
                    {{ "TEXT.OWN_ACCESS_EDIT_NOW_ALLOWED" | translate }}
                </div>

                <div class="form-group row">
                    <div class="col-sm-12">
                        <input type="text" id="user" name="user" placeholder="{{ 'ACCESS_MANAGEMENT.ADD_USER'|translate }}" ng-model="user" autocomplete="off" typeahead-template-url="userTypeaheadTemplate.html" uib-typeahead="user as (user.full_name) for user in getUsers($viewValue)" typeahead-no-results="noResults" typeahead-on-select="typeaheadOnSelect($item, $model, $label, $event)" typeahead-editable="false" typeahead-wait-ms="100" class="form-control" required>
                        <div ng-show="noResults">
                            <i class="glyphicon glyphicon-remove"></i> {{ "TEXT.NO_RESULTS_FOUND" | translate }}
                        </div>
                        <div class="invalid-feedback d-block" ng-show="showAlreadyAddedError" translate>ACCESS_MANAGEMENT.TEXT.USER_ALREADY_HAS_ACCESS</div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <div loading-container="tableParams.settings().$loading" class="table-wrapper">
                            <table ng-table="tableParams" show-filter="true" class="table table-bordered table-striped">
                                <colgroup>
                                    <col style="width: 55%">
                                    <col style="width: 35%">
                                    <col style="width: 10%">
                                </colgroup>
                                <tr ng-repeat="password_group_access in $data">
                                    <td data-title="'WORDS.USER'|translate" filter="{ 'user.full_name': 'text' }" sortable="'user.full_name'">
                                        {{password_group_access.user.full_name}}
                                    </td>
                                    <td data-title="'WORDS.RIGHTS'|translate" filter="{'right': 'select'}" filter-data="selectRights"  sortable="'right'" style="text-align:center;">
                                        <div class="btn-group">
                                            <label class="btn btn-sm" ng-model="password_group_access.right" uib-btn-radio="1" ng-class="{'btn-light': password_group_access.right != 1, 'btn-success': password_group_access.right == 1}" ng-click="updateAccess(password_group_access, 1)">Read-Only</label>
                                            <label class="btn btn-sm" ng-model="password_group_access.right" uib-btn-radio="2" ng-class="{'btn-light': password_group_access.right != 2, 'btn-warning': password_group_access.right == 2}" ng-click="updateAccess(password_group_access, 2)">Moderator</label>
                                            <label class="btn btn-sm" ng-model="password_group_access.right" uib-btn-radio="3" ng-class="{'btn-light': password_group_access.right != 3, 'btn-danger': password_group_access.right == 3}" ng-click="updateAccess(password_group_access, 3)">Administrator</label>
                                        </div>
                                    </td>
                                    <td style="text-align:center;">
                                        <div class="btn-group">
                                            <a ng-click="delete(password_group_access)" class="btn btn-light btn-sm"><i class="fa fa-trash-o"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr ng-if="!$data.length">
                                    <td colspan="3" translate>ACCESS_MANAGEMENT.TEXT.NO_PERMISSIONS_FOUND</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <div ng-show="nav == 1">
                <script type="text/ng-template" id="userTypeaheadTemplateGroup.html">
                    <a class="typeahead-supporter dropdown-item">
                        <span ng-bind-html="match.model.name | uibTypeaheadHighlight:query"></span>
                    </a>
                </script>

                <div class="alert alert-warning" ng-show="showOwnUserGroupError">
                    {{ "TEXT.OWN_ACCESS_EDIT_NOW_ALLOWED" | translate }}
                </div>

                <div class="form-group row">
                    <div class="col-sm-12">
                        <input type="text" id="userGroup" name="userGroup" placeholder="{{ 'ACCESS_MANAGEMENT.ADD_GROUP'|translate }}" ng-model="userGroup" autocomplete="off" typeahead-template-url="userTypeaheadTemplateGroup.html" uib-typeahead="user as (user.name) for user in getUserGroups($viewValue)" typeahead-no-results="noGroupResults" typeahead-on-select="typeaheadOnSelectGroup($item, $model, $label, $event)" typeahead-editable="false" typeahead-wait-ms="100" class="form-control" required>
                        <div ng-show="noGroupResults">
                            <i class="glyphicon glyphicon-remove"></i> {{ "TEXT.NO_RESULTS_FOUND" | translate }}
                        </div>
                        <div class="invalid-feedback d-block" ng-show="showAlreadyAddedErrorGroup" translate>ACCESS_MANAGEMENT.TEXT.GROUP_ALREADY_HAS_ACCESS</div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <div loading-container="tableGroupParams.settings().$loading" class="table-wrapper">
                            <table ng-table="tableGroupParams" show-filter="true" class="table table-bordered table-striped">
                                <colgroup>
                                    <col style="width: 55%">
                                    <col style="width: 35%">
                                    <col style="width: 10%">
                                </colgroup>
                                <tr ng-repeat="password_group_user_group_access in $data">
                                    <td data-title="'WORDS.GROUP'|translate" filter="{ 'user_group.name': 'text' }" sortable="'user_group.name'">
                                        {{password_group_user_group_access.user_group.name}}
                                    </td>
                                    <td data-title="'WORDS.RIGHTS'|translate" filter="{'right': 'select'}" filter-data="selectRights"  sortable="'right'" style="text-align:center;">
                                        <div class="btn-group">
                                            <label class="btn btn-sm" ng-model="password_group_access.right" uib-btn-radio="1" ng-class="{'btn-light': password_group_user_group_access.right != 1, 'btn-success': password_group_user_group_access.right == 1}" ng-click="updateUserGroupAccess(password_group_user_group_access, 1)">Read-Only</label>
                                            <label class="btn btn-sm" ng-model="password_group_access.right" uib-btn-radio="2" ng-class="{'btn-light': password_group_user_group_access.right != 2, 'btn-warning': password_group_user_group_access.right == 2}" ng-click="updateUserGroupAccess(password_group_user_group_access, 2)">Moderator</label>
                                            <label class="btn btn-sm" ng-model="password_group_access.right" uib-btn-radio="3" ng-class="{'btn-light': password_group_user_group_access.right != 3, 'btn-danger': password_group_user_group_access.right == 3}" ng-click="updateUserGroupAccess(password_group_user_group_access, 3)">Administrator</label>
                                        </div>
                                    </td>
                                    <td style="text-align:center;">
                                        <div class="btn-group">
                                            <a ng-click="deleteGroup(password_group_user_group_access)" class="btn btn-light btn-sm"><i class="fa fa-trash-o"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr ng-if="!$data.length">
                                    <td colspan="3" translate>ACCESS_MANAGEMENT.TEXT.NO_PERMISSIONS_FOUND</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn btn-light" type="button" ng-click="cancel()" translate>WORDS.FINISH</button>
        </div>
    </form>
</div>
