
<div class="manage-user view" ng-class="{loading: !isLoaded()}">

    <!-- User header and data source tabs -->
    <div class="username header">
        <h2>{{'MANAGE_USER.SECTION_HEADER_EDIT_USER' | translate}}</h2>
        <guac-user-menu></guac-user-menu>
    </div>
    <div class="page-tabs">
        <guac-page-list pages="accountPages"></guac-page-list>
    </div>

    <!-- Warn if user is read-only -->
    <div class="section" ng-show="isReadOnly()">
        <p class="notice read-only">{{'MANAGE_USER.INFO_READ_ONLY' | translate}}</p>
    </div>

    <!-- Sections applicable to non-read-only users -->
    <div ng-show="!isReadOnly()">

        <!-- User password section -->
        <div class="section">
            <table class="properties">
                <tr>
                    <th>{{'MANAGE_USER.FIELD_HEADER_USERNAME' | translate}}</th>
                    <td>
                        <input ng-show="canEditUsername()" ng-model="user.username" type="text"/>
                        <span  ng-hide="canEditUsername()">{{user.username}}</span>
                    </td>
                </tr>
                <tr>
                    <th>{{'MANAGE_USER.FIELD_HEADER_PASSWORD' | translate}}</th>
                    <td><input ng-model="user.password" type="password" /></td>
                </tr>
                <tr>
                    <th>{{'MANAGE_USER.FIELD_HEADER_PASSWORD_AGAIN' | translate}}</th>
                    <td><input ng-model="passwordMatch" type="password" /></td>
                </tr>
            </table>
        </div>

        <!-- User attributes section -->
        <div class="attributes" ng-show="canChangeAttributes()">
            <guac-form namespace="'USER_ATTRIBUTES'" content="attributes" model="user.attributes"></guac-form>
        </div>

        <!-- System permissions section -->
        <div class="system-permissions" ng-show="canChangePermissions()">
            <h2 class="header">{{'MANAGE_USER.SECTION_HEADER_PERMISSIONS' | translate}}</h2>
            <div class="section">
                <table class="properties">
                    <tr ng-repeat="systemPermissionType in systemPermissionTypes"
                        ng-show="canChangeSystemPermissions()">
                        <th>{{systemPermissionType.label | translate}}</th>
                        <td><input type="checkbox" ng-model="permissionFlags.systemPermissions[systemPermissionType.value]"
                                                   ng-change="systemPermissionChanged(systemPermissionType.value)"/></td>
                    </tr>
                    <tr>
                        <th>{{'MANAGE_USER.FIELD_HEADER_CHANGE_OWN_PASSWORD' | translate}}</th>
                        <td><input type="checkbox" ng-model="permissionFlags.userPermissions.UPDATE[selfUsername]"
                                                   ng-change="userPermissionChanged('UPDATE', selfUsername)"/></td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Connection permissions section -->
        <div class="connection-permissions" ng-show="canChangePermissions()">
            <div class="header">
                <h2>{{'MANAGE_USER.SECTION_HEADER_CONNECTIONS' | translate}}</h2>
                <guac-group-list-filter connection-groups="rootGroups"
                    filtered-connection-groups="filteredRootGroups"
                    placeholder="'MANAGE_USER.FIELD_PLACEHOLDER_FILTER' | translate"
                    connection-properties="filteredConnectionProperties"
                    connection-group-properties="filteredConnectionGroupProperties"></guac-group-list-filter>
            </div>
            <div class="section">
                <guac-group-list
                    context="groupListContext"
                    connection-groups="filteredRootGroups"
                    connection-template="'app/manage/templates/connectionPermission.html'"
                    connection-group-template="'app/manage/templates/connectionGroupPermission.html'"
                    page-size="20"/>
            </div>
        </div>

        <!-- Form action buttons -->
        <div class="action-buttons">
            <button ng-show="canSaveUser()" ng-click="saveUser()">{{'MANAGE_USER.ACTION_SAVE' | translate}}</button>
            <button ng-show="canCloneUser()" ng-click="cloneUser()">{{'MANAGE_USER.ACTION_CLONE' | translate}}</button>
            <button ng-click="cancel()">{{'MANAGE_USER.ACTION_CANCEL' | translate}}</button>
            <button ng-show="canDeleteUser()" ng-click="deleteUser()" class="danger">{{'MANAGE_USER.ACTION_DELETE' | translate}}</button>
        </div>

    </div>

</div>
