<div class="umb-user-details-details">

    <div class="umb-user-details-details__main-content">

        <umb-box>

            <umb-box-header title-key="user_profile"></umb-box-header>

            <umb-box-content class="block-form">

                <umb-control-group label="@general_email" required="true" alias="email">

                    <input type="email"
                           localize="placeholder"
                           placeholder="@placeholders_enteremail"
                           class="input-block-level"
                           ng-model="model.user.email"
                           umb-auto-focus
                           name="email"
                           id="email"
                           val-email
                           ng-required="true"
                           val-server-field="Email" />
                    <span class="help-inline" val-msg-for="email" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                    <span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <umb-control-group label="@general_username" ng-if="!model.usernameIsEmail" required="true">
                    <input type="text"
                           localize="placeholder"
                           placeholder="@placeholders_enterusername"
                           class="input-block-level"
                           ng-model="model.user.username"
                           umb-auto-focus name="username"
                           required
                           val-server-field="Username" />
                    <span class="help-inline" val-msg-for="username" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                    <span class="help-inline" val-msg-for="username" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <umb-control-group label="@user_language" description="@user_languageHelp">
                    <select class="input-block-level"
                            ng-model="model.user.culture"
                            ng-options="key as value for (key, value) in model.user.availableCultures"
                            name="culture"
                            required
                            val-server-field="Culture"></select>
                    <span class="help-inline" val-msg-for="culture" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                    <span class="help-inline" val-msg-for="culture" val-toggle-msg="valServerField"></span>
                </umb-control-group>
            </umb-box-content>
        </umb-box>

        <umb-box>
            <umb-box-header title-key="user_assignAccess"></umb-box-header>
            <umb-box-content class="block-form">

                <umb-control-group style="margin-bottom: 25px;" label="@general_groups" description="@user_groupsHelp" required="true">

                    <umb-user-group-preview ng-repeat="userGroup in model.user.userGroups"
                                            icon="userGroup.icon"
                                            name="userGroup.name"
                                            sections="userGroup.sections"
                                            content-start-node="userGroup.contentStartNode"
                                            media-start-node="userGroup.mediaStartNode"
                                            allow-remove="!model.user.isCurrentUser"
                                            on-remove="model.removeSelectedItem($index, model.user.userGroups)">
                    </umb-user-group-preview>

                    <a href=""
                       ng-if="!model.user.isCurrentUser"
                       style="max-width: 100%;"
                       class="umb-node-preview-add"
                       ng-click="model.openUserGroupPicker()"
                       prevent-default>
                        <localize key="general_add">Add</localize>
                    </a>

                </umb-control-group>

                <umb-control-group style="margin-bottom: 25px;" label="@user_startnodes" description="@user_startnodeshelp">

                    <umb-node-preview style="max-width: 100%;"
                                      ng-repeat="node in model.user.startContentIds"
                                      icon="node.icon"
                                      name="node.name"
                                      allow-remove="!model.user.isCurrentUser"
                                      on-remove="model.removeSelectedItem($index, model.user.startContentIds)">
                    </umb-node-preview>

                    <umb-node-preview ng-if="model.user.startContentIds.length === 0 && model.user.isCurrentUser"
                                      style="max-width: 100%;"
                                      name="model.labels.noStartNodes">
                    </umb-node-preview>

                    <a href=""
                       ng-if="!model.user.isCurrentUser"
                       class="umb-node-preview-add"
                       id="content-start-add"
                       ng-click="model.openContentPicker()"
                       prevent-default>
                        <localize key="general_add">Add</localize>
                    </a>

                </umb-control-group>

                <umb-control-group label="@user_mediastartnodes" description="@user_mediastartnodeshelp">

                    <umb-node-preview style="max-width: 100%;"
                                      ng-repeat="node in model.user.startMediaIds"
                                      icon="node.icon"
                                      name="node.name"
                                      allow-remove="!model.user.isCurrentUser"
                                      on-remove="model.removeSelectedItem($index, model.user.startMediaIds)">
                    </umb-node-preview>

                    <umb-node-preview ng-if="model.user.startMediaIds.length === 0 && model.user.isCurrentUser"
                                      style="max-width: 100%;"
                                      name="model.labels.noStartNodes">
                    </umb-node-preview>

                    <a href=""
                       ng-if="!model.user.isCurrentUser"
                     class="umb-node-preview-add"
                       ng-click="model.openMediaPicker()"
                       id="media-start-add"
                       prevent-default>
                        <localize key="general_add">Add</localize>
                    </a>

                </umb-control-group>

            </umb-box-content>
        </umb-box>

        <umb-box>
            <umb-box-header title-key="user_access" description-key="user_accessHelp"></umb-box-header>
            <umb-box-content class="block-form" style="padding-bottom: 0;">

                <umb-control-group label="@sections_content">
                    <umb-node-preview style="max-width: 100%;"
                                      ng-repeat="node in model.user.calculatedStartContentIds"
                                      icon="node.icon"
                                      name="node.name">
                    </umb-node-preview>
                    <umb-node-preview ng-if="model.user.calculatedStartContentIds.length === 0"
                                      style="max-width: 100%;"
                                      name="model.labels.noStartNodes">
                    </umb-node-preview>
                </umb-control-group>

                <umb-control-group label="@sections_media">
                    <umb-node-preview style="max-width: 100%;"
                                      ng-repeat="node in model.user.calculatedStartMediaIds"
                                      icon="node.icon"
                                      name="node.name">
                    </umb-node-preview>
                    <umb-node-preview ng-if="model.user.calculatedStartMediaIds.length === 0"
                                      style="max-width: 100%;"
                                      name="model.labels.noStartNodes">
                    </umb-node-preview>
                </umb-control-group>

            </umb-box-content>
        </umb-box>
    </div>

    <div class="umb-user-details-details__sidebar">

        <div class="umb-user-details-details__section">

            <!-- Avatar -->
            <div class="umb-user-details-avtar">
                <ng-form name="avatarForm" class="flex flex-column justify-center items-center">

                    <umb-avatar style="margin-bottom: 15px;"
                                color="secondary"
                                size="xxl"
                                name="{{model.user.name}}"
                                img-src="{{model.user.avatars[3]}}"
                                img-srcset="{{model.user.avatars[4]}} 2x, {{model.user.avatars[4]}} 3x">
                    </umb-avatar>

                    <umb-progress-bar style="max-width: 120px;"
                                      ng-if="model.avatarFile.uploadStatus === 'uploading'"
                                      progress="{{ model.avatarFile.uploadProgress }}"
                                      size="s">
                    </umb-progress-bar>

                    <div class="flex items-center" ng-if="model.avatarFile.uploadStatus !== 'uploading'">

                        <a href=""
                           class="umb-user-group-preview__action"
                           ngf-select ng-model="filesHolder"
                           ngf-change="model.changeAvatar($files, $event)"
                           ngf-multiple="false"
                           ngf-pattern="{{model.acceptedFileTypes}}"
                           ngf-max-size="{{ model.maxFileSize }}">
                            <localize key="user_changePhoto">Change photo</localize>
                        </a>

                        <a href=""
                           ng-if="model.user.avatars"
                           class="umb-user-group-preview__action umb-user-group-preview__action--red"
                           ng-click="model.clearAvatar()"
                           prevent-default>
                            <localize key="user_removePhoto">Remove photo</localize>
                        </a>

                    </div>

                </ng-form>

            </div>

            <!-- Actions -->
            <div class="umb-user-details-actions">

                <div>
                    <umb-button ng-if="model.user.userDisplayState.key === 'Disabled' && !model.user.isCurrentUser"
                                type="button"
                                button-style="[success,block]"
                                state="model.enableUserButtonState"
                                action="model.enableUser()"
                                label="Enable"
                                label-key="actions_enable"
                                size="s">
                    </umb-button>
                </div>

                <div>
                    <umb-button ng-if="model.user.userDisplayState.key === 'LockedOut' && !model.user.isCurrentUser"
                                type="button"
                                button-style="[success,block]"
                                state="model.unlockUserButtonState"
                                action="model.unlockUser()"
                                label="Unlock"
                                label-key="actions_unlock"
                                size="s">
                    </umb-button>
                </div>
                <div>
                    <umb-button ng-if="model.user.userDisplayState.key !== 'Disabled' && model.user.userDisplayState.key !== 'Invited' && !model.user.isCurrentUser"
                                type="button"
                                button-style="[info,block]"
                                action="model.disableUser()"
                                state="model.disableUserButtonState"
                                label="Disable"
                                label-key="actions_disable"
                                size="s">
                    </umb-button>
                </div>
                <div>
                    <umb-button type="button" ng-if="model.user.userDisplayState.key !== 'Invited' && model.changePasswordModel.isChanging === false"
                                button-style="[info,block]"
                                action="model.toggleChangePassword()"
                                label="Change password"
                                label-key="general_changePassword"
                                state="changePasswordButtonState"
                                size="s">
                    </umb-button>
                </div>
                <div>
                    <umb-button type="button" ng-if="!model.user.lastLoginDate"
                                button-style="[danger,block]"
                                action="model.deleteNonLoggedInUser()"
                                label="Delete"
                                label-key="user_deleteUser"
                                state="deleteNotLoggedInUserButtonState"
                                size="s">
                    </umb-button>
                </div>

                <ng-form ng-if="model.changePasswordModel.isChanging" name="passwordForm" class="block-form" val-form-manager>

                    <change-password password-values="model.user.changePassword"
                                     config="model.changePasswordModel.config">
                    </change-password>

                    <umb-button type="button"
                                action="model.toggleChangePassword()"
                                label="Cancel"
                                label-key="general_cancel"
                                button-style="cancel">
                    </umb-button>

                </ng-form>

                <div ng-if="model.user.resetPasswordValue">
                    <p><br />Password reset to value: <strong>{{model.user.resetPasswordValue}}</strong></p>
                </div>

            </div>

            <!-- User stats -->
            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="general_status">Status</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    <umb-badge style="margin-top: 4px;" size="s" color="{{model.user.userDisplayState.color}}">
                        {{model.user.userDisplayState.name}}
                    </umb-badge>
                </div>
            </div>

            <div ng-if="model.user.userDisplayState.key === 'Invited' && !model.user.isCurrentUser">
                <textarea name="resendInviteMessage"
                          type="text"
                          class="input-block-level"
                          localize="placeholder"
                          placeholder="@placeholders_enterMessage"
                          ng-model="model.resendInviteMessage"
                          rows="4">
                </textarea>
                <umb-button type="button"
                            button-style="[info,block]"
                            action="model.resendInvite()"
                            state="model.resendInviteButtonState"
                            label="Resend Invite"
                            label-key="actions_resendInvite"
                            size="s">
                </umb-button>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="user_lastLogin">Last login</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    <span ng-if="model.user.lastLoginDate">{{ model.user.formattedLastLogin }}</span>
                    <span ng-if="!model.user.lastLoginDate">{{ model.user.name | umbWordLimit:1 }} <localize key="user_noLogin">has not logged in yet</localize></span>
                </div>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="user_failedPasswordAttempts">Failed login attempts</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    {{ model.user.failedPasswordAttempts }}
                </div>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="user_lastLockoutDate">Last lockout date</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    <span ng-if="model.user.lastLockoutDate === '0001-01-01T00:00:00'">
                        {{ model.user.name | umbWordLimit:1 }} <localize key="user_noLockouts">hasn't been locked out</localize>
                    </span>
                    <span ng-if="model.user.lastLockoutDate !== '0001-01-01T00:00:00'">{{ model.user.formattedLastLockoutDate }}</span>
                </div>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="user_lastPasswordChangeDate">Password is last changed</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    <span ng-if="model.user.lastPasswordChangeDate === '0001-01-01T00:00:00'">
                        <localize key="user_noPasswordChange">The password hasn't been changed</localize>
                    </span>
                    <span ng-if="model.user.lastPasswordChangeDate !== '0001-01-01T00:00:00'">{{ model.user.formattedLastPasswordChangeDate }}</span>
                </div>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="user_createDate">User is created</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    {{ model.user.formattedCreateDate }}
                </div>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="user_updateDate">User is last updated</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    {{ model.user.formattedUpdateDate }}
                </div>
            </div>

            <div class="umb-user-details-details__information-item">
                <div class="umb-user-details-details__information-item-label">
                    <localize key="general_id">Id</localize>:
                </div>
                <div class="umb-user-details-details__information-item-content">
                    {{ model.user.id }}
                </div>
                <div class="umb-user-details-details__information-item-content">
                    <small>{{ model.user.key }}</small>
                </div>
                </div>

            </div>

    </div>

</div>
