<div id="add-permissions-modal" class="AddPermissions modal fade">
    <div class="AddPermissions-backDrop is-loggedOut"></div>
    <div class="AddPermissions-dialog">
        <div class="AddPermissions-content is-loggedOut">
            <div class="AddPermissions-header">
                <div class="List-header">
                    <div class="List-title">
                        <div class="List-titleText ng-binding">
                            {{ object.name || object.username }}
                            <div class="List-titleLockup"></div>
                            {{ title }}
                        </div>
                    </div>
                    <div class="Form-exitHolder">
                        <button class="Form-exit" ng-click="closeModal()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="AddPermissions-body">
                <div class="AddPermissions-directions">
                    <span class="AddPermissions-directionNumber">
                        1
                    </span>
                    <div ng-hide='withoutTeamPermissions' translate>
                        Please select Users / Teams from the lists below.
                    </div>
                    <div ng-show='withoutTeamPermissions' translate>
                        Please select Users from the list below.
                    </div>
                </div>

                <div class="Form-tabHolder" ng-hide='withoutTeamPermissions'>
                    <div id="users_tab" class="Form-tab"
                        ng-click="selectTab('users')"
                        ng-class="{'is-selected': tab.users }" translate>
                        Users
                    </div>
                    <div id="teams_tab" class="Form-tab"
                        ng-click="selectTab('teams')"
                        ng-class="{'is-selected': tab.teams }" translate>
                        Teams
                    </div>
                </div>

                <div id="AddPermissions-users" class="AddPermissions-list" ng-show="tab.users">
                    <rbac-multiselect-list view="Users" all-selected="allSelected" dataset="usersDataset" object-type="object.type"></rbac-multiselect-list>
                </div>
                <div id="AddPermissions-teams" class="AddPermissions-list" ng-if="tab.teams">
                    <rbac-multiselect-list view="Teams" all-selected="allSelected" dataset="teamsDataset" object-type="object.type"></rbac-multiselect-list>
                </div>

                <span ng-show="hasSelectedRows()">
                    <div class="AddPermissions-separator"></div>
                    <div class="AddPermissions-directions">
                        <span class="AddPermissions-directionNumber">
                            2
                        </span>
                        <translate>Please assign roles to the selected users/teams</translate>
                        <div class="AddPermissions-keyToggle btn"
                            ng-class="{'is-active': showKeyPane}"
                            ng-click="toggleKeyPane()" translate>
                            Key
                        </div>
                    </div>
                    <div class="AddPermissions-keyPane"
                        ng-show="showKeyPane">
                        <div class="AddPermissions-keyRow"
                            ng-repeat="key in roleKey">
                            <div class="AddPermissions-keyName">
                                {{ key.name }}
                            </div>
                            <div class="AddPermissions-keyDescription">
                                {{ key.description || "No description provided" }}
                            </div>
                        </div>
                    </div>
                    <form name="userForm" novalidate>
                        <ng-form name="userRoleForm">
                            <span ng-repeat="(type, collection) in allSelected">
                                <div class="AddPermissions-roleRow" ng-repeat="obj in collection">
                                    <div class="AddPermissions-roleName">
                                        <span class="AddPermissions-roleNameVal">
                                            {{ obj.name }}
                                        </span>
                                        <span class="Form-title--roleType">
                                            {{ obj.type }}
                                        </span>
                                    </div>
                                    <rbac-multiselect-role class="AddPermissions-roleSelect" roles="tab.teams ? teamRoles : roles" model="obj.roles">
                                    </rbac-multiselect-role>
                                    <button class="AddPermissions-roleRemove"
                                        ng-click="removeObject(obj)">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                            </span>
                        </ng-form>
                    </form>
                </span>
            </div>
            <div class="AddPermissions-footer">
                <div class="buttons Form-buttons AddPermissions-buttons">
                    <button type="button"
                        class="btn btn-sm Form-cancelButton"
                        ng-click="closeModal()" translate>
                        Cancel
                    </button>
                    <button type="button"
                        class="btn btn-sm Form-saveButton"
                        ng-click="updatePermissions()"
                        ng-disabled="userRoleForm.$invalid || !allSelected || !hasSelectedRows()" translate>
                        Save
                    </button>
                </div>
            </div>
        </div>
   </div>
</div>
