<style>
    .checkbox-label {
        cursor: default;
    }
</style>

<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 ng-if="!role.id" class="modal-title">
        {{'Create new role' | translate}}
    </h1>
    <h1 ng-if="role.id" class="modal-title">
        {{'Edit role' | translate}}
    </h1>
</div>
<div class="modal-body">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label>{{'Name' | translate}}</label>
                <input type="text" ng-model="role.name" placeholder="{{'Name' | translate}}" class="form-control">
            </div>
            <div class="form-group">
                <label>{{'Sort order' | translate}}</label>
                <input type="text" ng-model="role.sortOrder" placeholder="{{'Sort order' | translate}}" class="form-control">
            </div>
        </div>
    </div>
    <fieldset ng-disabled="!role.canBeModified && role.id">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Membership' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="role.allowMultiple" ng-disabled="role.defaultPrincipals.length > 0" />
                        {{'Allow multiple' | translate}}
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="principalType" ng-disabled="role.defaultPrincipals.length > 0" ng-model="principalType" ng-change="updatePrincipalType();" value="users" />
                        {{'People only' | translate}}
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="principalType" ng-disabled="role.defaultPrincipals.length > 0" ng-model="principalType" ng-change="updatePrincipalType();" value="groups" />
                        {{'Groups only' | translate}}
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="principalType" ng-disabled="role.defaultPrincipals.length > 0" ng-model="principalType" ng-change="updatePrincipalType();" value="all" />
                        {{'People and groups' | translate}}
                    </label>
                </div>
                <div ng-show="role.defaultPrincipals.length > 0">
                    *{{'Remove default value before change' | translate}}
                </div>

                <hr />

                <div class="radio">
                    <label>
                        <input type="radio" name="principalDomain" ng-disabled="principalType === 'groups'" ng-model="principalDomain" ng-change="updatePrincipalDomain()" value="internals" />
                        {{'Internals only' | translate}}
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="principalDomain" ng-disabled="principalType === 'groups'" ng-model="principalDomain" ng-change="updatePrincipalDomain()" value="externals" />
                        {{'Externals only' | translate}}
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="principalDomain" ng-disabled="principalType === 'groups'" ng-model="principalDomain" ng-change="updatePrincipalDomain()" value="all" />
                        {{'Internals and externals' | translate}}
                    </label>
                </div>
                <div ng-show="principalType === 'groups'">
                    *{{'Remove groups only setting before change' | translate}}
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Default value' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <div ng-hide="role.addCurrentUserInNewForm && !role.allowMultiple">
                    <div wizdom365-principalpicker
                         principals="role.defaultPrincipals"
                         mode="{{principalType}}"
                         allowmultiple="{{role.allowMultiple}}"
                         alloweveryone="true"
                         class="principal-picker"></div>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="role.addCurrentUserInNewForm" ng-disabled="role.defaultPrincipals.length > 0 && !role.allowMultiple" />
                        {{'Add current user' | translate}}
                    </label>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Display options' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="role.hideOnDisplayForm" ng-disabled="!role.canBeModified" />
                            {{"Hide on display form" | translate}}
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="role.hideOnEditForm" ng-disabled="!role.canBeModified" />
                            {{"Hide on edit form" | translate}}
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="role.hideOnNewForm" ng-disabled="!role.canBeModified" />
                            {{"Hide on new form" | translate}}
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'App permissions' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.editMetadata" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Edit metadata' | translate}}</td>
                        <td class="checkbox-label">{{'Can edit metadata' | translate}}</td>
                    </tr>
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.assignRoles" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Assign roles' | translate}}</td>
                        <td class="checkbox-label">{{'Can assign people and groups to roles' | translate}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="panel panel-default" ng-show="app.name == 'CourseManagement' && role.internalName == 'W365CM_Participants'">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Own role permissions' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.canAddToOwnRole" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Add to role' | translate}}</td>
                        <td class="checkbox-label">{{'Can add users to own role' | translate}}</td>
                    </tr>
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.canRemoveFromOwnRole" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Remove from role' | translate}}</td>
                        <td class="checkbox-label">{{'Can remove users from own role' | translate}} ({{'Added by the active user' |  translate}})</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="panel panel-default" ng-show="app.name =='Project space'">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Noticeboard permissions' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.noticeboardRead" ng-change="updateDependencies('noticeboardRead');" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Read' | translate}}</td>
                        <td class="checkbox-label">{{'Can read the noticeboard site channel' | translate}}</td>
                    </tr>
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.noticeboardWrite" ng-change="updateDependencies('noticeboardWrite');" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Write' | translate}}</td>
                        <td class="checkbox-label">{{'Can create items in the noticeboard sitechannel' | translate}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="panel panel-default" ng-show="app.name =='Project space' && !wizdomEnvironmentIsOnPrem">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Modern SharePoint and Office 365 Group permissions' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.isModernSiteOwners" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Owner' | translate}}</td>
                        <td class="checkbox-label">{{'Users and groups will be added as owners' | translate}}</td>
                    </tr>
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.isModernSiteMembers" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Member' | translate}}</td>
                        <td class="checkbox-label">{{'Users and groups will be added as members' | translate}}</td>
                    </tr>
                    <tr>
                        <td style="width: 40px;"><input type="checkbox" ng-model="role.isModernSiteGuests" /></td>
                        <td class="checkbox-label" style="width: 135px;">{{'Guests' | translate}}</td>
                        <td class="checkbox-label">{{'Users and groups will be added as visitors on Communication sites. This will be ignored for Team sites and Office 365 Groups.' | translate}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="panel panel-default" ng-show="app.name =='Project space'">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Classic SharePoint permissions' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <div>
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            {{'Use SharePoint default permission level' | translate}}
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="checkbox">
                            <select ng-model="permissionTemplate" ng-change="selectPermission();" class="form-control">
                                <option value="None">{{'None / Reset' | translate}}</option>
                                <option value="FullControl">{{'Has full control' | translate}}</option>
                                <option value="Design">{{'Can design' | translate}}</option>
                                <option value="Edit">{{'Can edit' | translate}}</option>
                                <option value="Contribute">{{'Can contribute' | translate}}</option>
                                <option value="Read">{{'Can read' | translate}}</option>
                                <option value="Approve">{{'Can approve' | translate}}</option>
                                <option value="ManageHierarchy">{{'Can manage hierarchy' | translate}}</option>
                                <option value="RestrictedRead">{{'Restricted Read' | translate}}</option>
                                <option value="RestrictedInterfacesForTranslation">{{'Restricted Interfaces for Translation' | translate}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="panel-heading">
                        <h3 class="panel-title">{{'Lists permissions' | translate}}</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td style="width: 40px;"><input type="checkbox" ng-model="role.manageLists" ng-change="updateDependencies('manageLists');" /></td>
                                <td class="checkbox-label" style="width: 135px;">{{'Manage Lists' | translate}}</td>
                                <td class="checkbox-label">{{'Create and delete lists, add or remove columns in a list, and add or remove public views of a list.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.cancelCheckout" ng-change="updateDependencies('cancelCheckout');" /></td>
                                <td class="checkbox-label">{{'Override List Behaviors' | translate}}</td>
                                <td class="checkbox-label">{{'Discard or check in a document which is checked out to another user, and change or override settings which allow users to read/edit only their own items.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.addListItems" ng-change="updateDependencies('addListItems');" /></td>
                                <td class="checkbox-label">{{'Add Items' | translate}}</td>
                                <td class="checkbox-label">{{'Add items to lists and add documents to document libraries.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.editListItems" ng-change="updateDependencies('editListItems');" /></td>
                                <td class="checkbox-label">{{'Edit Items' | translate}}</td>
                                <td class="checkbox-label">{{'Edit items in lists, edit documents in document libraries, and customize Web Part Pages in document libraries.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.deleteListItems" ng-change="updateDependencies('deleteListItems');" /></td>
                                <td class="checkbox-label">{{'Delete Items' | translate}}</td>
                                <td class="checkbox-label">{{'Delete items from a list and documents from a document library.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.viewListItems" ng-change="updateDependencies('viewListItems');" /></td>
                                <td class="checkbox-label">{{'View Items' | translate}}</td>
                                <td class="checkbox-label">{{'View items in lists and documents in document libraries.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.approveItems" ng-change="updateDependencies('approveItems');" /></td>
                                <td class="checkbox-label">{{'Approve Items' | translate}}</td>
                                <td class="checkbox-label">{{'Approve a minor version of a list item or document.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.openItems" ng-change="updateDependencies('openItems');" /></td>
                                <td class="checkbox-label">{{'Open Items' | translate}}</td>
                                <td class="checkbox-label">{{'View the source of documents with server-side file handlers.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.viewVersions" ng-change="updateDependencies('viewVersions');" /></td>
                                <td class="checkbox-label">{{'View Versions' | translate}}</td>
                                <td class="checkbox-label">{{'View past versions of a list item or document.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.deleteVersions" ng-change="updateDependencies('deleteVersions');" /></td>
                                <td class="checkbox-label">{{'Delete Versions' | translate}}</td>
                                <td class="checkbox-label">{{'Delete past versions of a list item or document.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.createAlerts" ng-change="updateDependencies('createAlerts');" /></td>
                                <td class="checkbox-label">{{'Create Alerts' | translate}}</td>
                                <td class="checkbox-label">{{'Create alerts.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.viewFormPages" ng-change="updateDependencies('viewFormPages');" /></td>
                                <td class="checkbox-label">{{'View Application Pages' | translate}}</td>
                                <td class="checkbox-label">{{'View forms, views, and application pages. Enumerate lists.' | translate}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div>
                    <div class="panel-heading">
                        <h3 class="panel-title">{{'Site permissions' | translate}}</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td style="width: 40px;"><input type="checkbox" ng-model="role.managePermissions" ng-change="updateDependencies('managePermissions');" /></td>
                                <td class="checkbox-label" style="width: 135px;">{{'Manage Permissions' | translate}}</td>
                                <td class="checkbox-label">{{'Create and change permission levels on the Web site and assign permissions to users and groups.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.viewUsageData" ng-change="updateDependencies('viewUsageData');" /></td>
                                <td class="checkbox-label">{{'View Web Analytics Data' | translate}}</td>
                                <td class="checkbox-label">{{'View reports on Web site usage.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.manageSubwebs" ng-change="updateDependencies('manageSubwebs');" /></td>
                                <td class="checkbox-label">{{'Create Subsites' | translate}}</td>
                                <td class="checkbox-label">{{'Create subsites such as team sites, Meeting Workspace sites, and Document Workspace sites.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.manageWeb" ng-change="updateDependencies('manageWeb');" /></td>
                                <td class="checkbox-label">{{'Manage Web Site' | translate}}</td>
                                <td class="checkbox-label">{{'Grants the ability to perform all administration tasks for the Web site as well as manage content.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.addAndCustomizePages" ng-change="updateDependencies('addAndCustomizePages');" /></td>
                                <td class="checkbox-label">{{'Add and Customize Pages' | translate}}</td>
                                <td class="checkbox-label">{{'Add, change, or delete HTML pages or Web Part Pages, and edit the Web site using a Microsoft SharePoint Foundation-compatible editor.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.applyThemeAndBorder" ng-change="updateDependencies('applyThemeAndBorder');" /></td>
                                <td class="checkbox-label">{{'Apply Themes and Borders' | translate}}</td>
                                <td class="checkbox-label">{{'Apply a theme or borders to the entire Web site.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.applyStyleSheets" ng-change="updateDependencies('applyStyleSheets');" /></td>
                                <td class="checkbox-label">{{'Apply Style Sheets' | translate}}</td>
                                <td class="checkbox-label">{{'Apply a style sheet (.CSS file) to the Web site.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.createGroups" ng-change="updateDependencies('createGroups');" /></td>
                                <td class="checkbox-label">{{'Create Groups' | translate}}</td>
                                <td class="checkbox-label">{{'Create a group of users that can be used anywhere within the site collection.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.browseDirectories" ng-change="updateDependencies('browseDirectories');" /></td>
                                <td class="checkbox-label">{{'Browse Directories' | translate}}</td>
                                <td class="checkbox-label">{{'Enumerate files and folders in a Web site using SharePoint Designer and Web DAV interfaces.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.createSSCSite" ng-change="updateDependencies('createSSCSite');" /></td>
                                <td class="checkbox-label">{{'Use Self-Service Site Creation' | translate}}</td>
                                <td class="checkbox-label">{{'Create a Web site using Self-Service Site Creation.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.viewPages" ng-change="updateDependencies('viewPages');" /></td>
                                <td class="checkbox-label">{{'View Pages' | translate}}</td>
                                <td class="checkbox-label">{{'View pages in a Web site.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.enumeratePermissions" ng-change="updateDependencies('enumeratePermissions');" /></td>
                                <td class="checkbox-label">{{'Enumerate Permissions' | translate}}</td>
                                <td class="checkbox-label">{{'Enumerate permissions on the Web site, list, folder, document, or list item.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.browseUserInfo" ng-change="updateDependencies('browseUserInfo');" /></td>
                                <td class="checkbox-label">{{'Browse User Information' | translate}}</td>
                                <td class="checkbox-label">{{'View information about users of the Web site.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.manageAlerts" ng-change="updateDependencies('manageAlerts');" /></td>
                                <td class="checkbox-label">{{'Manage Alerts' | translate}}</td>
                                <td class="checkbox-label">{{'Manage alerts for all users of the Web site.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.useRemoteAPIs" ng-change="updateDependencies('useRemoteAPIs');" /></td>
                                <td class="checkbox-label">{{'Use Remote Interfaces' | translate}}</td>
                                <td class="checkbox-label">{{'Use SOAP, Web DAV, the Client Object Model or SharePoint Designer interfaces to access the Web site.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.useClientIntegration" ng-change="updateDependencies('useClientIntegration');" /></td>
                                <td class="checkbox-label">{{'Use Client Integration Features' | translate}}</td>
                                <td class="checkbox-label">{{'Use features which launch client applications. Without this permission, users will have to work on documents locally and upload their changes.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.open" ng-change="updateDependencies('open');" /></td>
                                <td class="checkbox-label">{{'Open' | translate}}</td>
                                <td class="checkbox-label">{{'Allows users to open a Web site, list, or folder in order to access items inside that container.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.editMyUserInfo" ng-change="updateDependencies('editMyUserInfo');" /></td>
                                <td class="checkbox-label">{{'Edit Personal User Information' | translate}}</td>
                                <td class="checkbox-label">{{'Allows a user to change his or her own user information, such as adding a picture.' | translate}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div>
                    <div class="panel-heading">
                        <h3 class="panel-title">{{'Personal permissions' | translate}}</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td style="width: 40px;"><input type="checkbox" ng-model="role.managePersonalViews" ng-change="updateDependencies('managePersonalViews');" /></td>
                                <td class="checkbox-label" style="width: 135px;">{{'Manage Personal Views' | translate}}</td>
                                <td class="checkbox-label">{{'Create, change, and delete personal views of lists.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.addDelPrivateWebParts" ng-change="updateDependencies('addDelPrivateWebParts');" /></td>
                                <td class="checkbox-label">{{'Add/Remove Personal Web Parts' | translate}}</td>
                                <td class="checkbox-label">{{'Add or remove personal Web Parts on a Web Part Page.' | translate}}</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" ng-model="role.updatePersonalWebParts" ng-change="updateDependencies('updatePersonalWebParts');" /></td>
                                <td class="checkbox-label">{{'Update Personal Web Parts' | translate}}</td>
                                <td class="checkbox-label">{{'Update Web Parts to display personalized information.' | translate}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<div class="modal-footer">
    <div ng-show="saving">{{'Updating roles in all repositories, please wait' | translate}}</div>
    <button ng-if="role.id" ng-hide="saving" ng-click="deleteRole()" class="btn btn-secondary" ng-disabled="!role.canBeDeleted">{{'Delete' | translate}}</button>
    <button ng-click="cancel()" ng-hide="saving" class="btn btn-default">{{'Close' | translate}}</button>
    <button ng-hide="saving" type="button" ng-click="ok();" class="btn btn-primary">{{'Save' | translate}}</button>
</div>