<div ng-controller="Umbraco.Editors.Users.UsersController as vm" class="clearfix">

    <!-- Users Overview -->
    <div ng-if="vm.usersViewState === 'overview'">

        <umb-load-indicator ng-show="vm.loading"></umb-load-indicator>

        <umb-editor-sub-header>

            <!-- No selection -->
            <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
                <umb-button-group
                    ng-if="vm.defaultButton"
                    default-button="vm.defaultButton"
                    sub-buttons="vm.subButtons">
                </umb-button-group>
            </umb-editor-sub-header-content-left>

            <umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
                <umb-editor-sub-header-section>
                    <umb-layout-selector
                        ng-if="vm.layouts"
                        layouts="vm.layouts"
                        active-layout="vm.activeLayout"
                        on-layout-select="vm.selectLayout">
                    </umb-layout-selector>
                </umb-editor-sub-header-section>
                <umb-editor-sub-header-section>
                    <div class="form-search -no-margin-bottom pull-right">
                        <div class="inner-addon left-addon">
                            <i class="icon icon-search"></i>
                            <input
                                class="form-control search-input"
                                type="text" localize="placeholder"
                                placeholder="@general_typeToSearch"
                                ng-model="vm.usersOptions.filter"
                                ng-change="vm.searchUsers()"
                                prevent-enter-submit
                                no-dirty-check>
                        </div>
                    </div>
                </umb-editor-sub-header-section>
            </umb-editor-sub-header-content-right>

            <!-- With selection -->
            <umb-editor-sub-header-content-left ng-if="vm.selection.length > 0">
                <umb-editor-sub-header-section>
                    <umb-button
                        type="button"
                        label="Clear selection"
                        size="xs"
                        label-key="buttons_clearSelection"
                        action="vm.clearSelection()"
                        disabled="actionInProgress">
                    </umb-button>
                </umb-editor-sub-header-section>
                <umb-editor-sub-header-section>
                    <strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.users.length }} <localize key="general_selected">selected</localize></strong>
                </umb-editor-sub-header-section>
                
            </umb-editor-sub-header-content-left>

            <umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
                <div style="margin-right: 5px;">
                    <umb-button
                        ng-if="vm.allowSetUserGroup"
                        type="button" size="xs"
                        label-key="actions_setGroup"
                        icon="icon-users"
                        action="vm.openBulkUserGroupPicker()">
                    </umb-button>
                </div>
                <div style="margin-right: 5px;">
                    <umb-button
                        ng-if="vm.allowEnableUser"
                        type="button"
                        size="xs"
                        state="vm.enableUserButtonState"
                        label-key="actions_enable"
                        icon="icon-check"
                        action="vm.enableUsers()">
                    </umb-button>
                </div>
                <div style="margin-right: 5px;">
                    <umb-button
                        ng-if="vm.allowUnlockUser"
                        type="button"
                        size="xs"
                        state="vm.unlockUserButtonState"
                        label-key="actions_unlock"
                        icon="icon-unlocked"
                        action="vm.unlockUsers()">
                    </umb-button>
                </div>
                <div>
                    <umb-button
                        ng-if="vm.allowDisableUser"
                        type="button"
                        size="xs"
                        state="vm.disableUserButtonState"
                        label-key="actions_disable"
                        icon="icon-block"
                        action="vm.disableUsers()">
                    </umb-button>
                </div>
            </umb-editor-sub-header-content-right>

        </umb-editor-sub-header>

        <!-- Filters -->
        <div style="margin-bottom: 20px;" class="flex items-center">

            <div style="font-size: 16px;">
                <span class="bold"><localize key="sections_users">Users</localize></span> <span ng-if="vm.usersOptions.totalItems">({{vm.usersOptions.totalItems}})</span>
            </div>

            <div class="flex" style="margin-left: auto;">

                <!-- State filter -->
                <div style="position: relative;" ng-if="vm.userStatesFilter.length > 0">
                    <a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('state')">
                        <span><localize key="general_status">Status</localize>:</span> 
                        <span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
                        <span class="caret"></span>
                    </a>
                    <umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-close="vm.page.showStatusFilter = false;">
                        <umb-dropdown-item ng-repeat="userState in vm.userStatesFilter | filter:{ count: '!0', key: '!All'}" style="padding: 8px 20px 8px 16px;">
                            <div class="flex items-center">
                                <input
                                    id="state-{{$index}}"
                                    type="checkbox"
                                    ng-model="userState.selected"
                                    ng-change="vm.setUserStatesFilter(userState)"
                                    style="margin-right: 10px; margin-top: -3px;" />
                                <label for="state-{{$index}}">{{ userState.name }} ({{userState.count}})</label>
                            </div>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

                <!-- Groups filter -->
                <div style="position: relative;">
                    <a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('group')">
                        <span><localize key="general_groups"></localize>:</span>
                        <span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
                        <span class="caret"></span>
                    </a>
                    <umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-close="vm.page.showGroupFilter = false;">
                        <umb-dropdown-item ng-repeat="userGroup in vm.userGroups" style="padding: 8px 20px 8px 16px;">
                            <div class="flex items-center">
                                <input
                                    id="group-{{$index}}"
                                    type="checkbox"
                                    ng-model="userGroup.selected"
                                    ng-change="vm.setUserGroupFilter(userGroup)"
                                    style="margin-right: 10px; margin-top: -3px;" />
                                <label for="group-{{$index}}">{{ userGroup.name }}</label>
                            </div>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

                <!-- Order By -->
                <div style="position: relative;">
                    <a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('orderBy')">
                        <span><localize key="general_orderBy">Order by</localize>:</span> 
                        <span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
                        <span class="caret"></span>
                    </a>
                    <umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-close="vm.page.showOrderByFilter = false;" umb-keyboard-list>
                        <umb-dropdown-item ng-repeat="sortData in vm.userSortData">
                            <a href="#" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)" prevent-default>{{sortData.label}}</a>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

            </div>

        </div>

        <!-- Empty states -->
        <umb-empty-state
            ng-if="!vm.users && vm.usersOptions.filter.length > 0"
            position="center">
            <localize key="general_searchNoResult"></localize>
        </umb-empty-state>

        <!-- Layout: Cards -->
        <div class="umb-user-cards" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
            <a href="" class="umb-user-card" ng-repeat="user in vm.users" ng-click="vm.clickUser(user)">
                <div class="umb-user-card__content" ng-class="{'umb-user-card__content--selected': user.selected}">
                    <umb-badge class="umb-user-card__badge" size="xs" ng-if="user.userDisplayState.key !== 'Active'" color="{{user.userDisplayState.color}}">
                        {{ user.userDisplayState.name }}
                    </umb-badge>
                    <div class="umb-user-card__avatar">
                        <umb-avatar size="l" color="secondary" name="{{user.name}}" img-src="{{user.avatars[2]}}" img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
                        </umb-avatar>
                    </div>
                    <div class="umb-user-card__checkmark" ng-class="{'umb-user-card__checkmark--visible': user.selected || vm.selection.length > 0 }"
                        ng-click="vm.selectUser(user, vm.selection, $event)">
                        <umb-checkmark ng-if="!user.isCurrentUser" checked="user.selected" size="s"></umb-checkmark>
                    </div>
                    <div class="umb-user-card__name" href="">{{user.name}}</div>
                    <div class="umb-user-card__group">
                        <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
                    </div>
                    <div class="umb-user-card__last-login">
                        <div ng-if="user.formattedLastLogin">
                            <div>
                                <localize key="user_lastLogin">Last login</localize>
                            </div>
                            {{ user.formattedLastLogin }}
                        </div>
                        <div ng-if="!user.formattedLastLogin">
                            <div>{{ user.name | umbWordLimit:1 }}
                                <localize key="user_noLogin">has not logged in yet</localize>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Layout: Table -->
        <div ng-if="vm.activeLayout.path === '2'">

      <table class="table table-hover">
                <thead>
                    <tr>
                        <th style="padding-left: 10px; width: 10px;">
                            <a href="" style="text-decoration: none;" ng-click="vm.selectAll()">
                                <umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark>
                            </a>
                        </th>
                        <th style="width: 70px;"></th>
                        <th><localize key="general_name">Name</localize></th>
                        <th><localize key="user_usergroup">User group</localize></th>
                        <th><localize key="user_lastLogin">Last login</localize></th>
                        <th><localize key="general_status">Status</localize></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="user in vm.users" ng-click="vm.clickUser(user)" style="cursor: pointer;" ng-mouseenter="user.hover = true" ng-mouseleave="user.hover = false">
                        <td style="padding-left: 10px;">
                            <div ng-if="!user.isCurrentUser" ng-click="vm.selectUser(user, vm.selection, $event)">
                                <umb-checkmark
                                    ng-if="vm.selection.length > 0 || user.hover"
                                    checked="user.selected"
                                    size="xs">
                                </umb-checkmark>
                            </div>
                        </td>
                        <td scope="row">
                            <umb-avatar
                                size="xs"
                                color="secondary"
                                name="{{user.name}}"
                                img-src="{{user.avatars[0]}}"
                                img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
                            </umb-avatar>
                        </td>
                        <td class="bold">{{user.name}}</td>
                        <td><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></td>
                        <td>{{ user.formattedLastLogin }}</td>
                        <td style="text-transform: capitalize;">
                            <umb-badge
                                size="xs"
                                ng-if="user.userDisplayState.key !== 'Active'"
                                color="{{user.userDisplayState.color}}">
                                {{ user.userDisplayState.name }}
                            </umb-badge>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <!-- Pagination -->
        <div ng-if="!vm.loading" class="flex justify-center">
            <umb-pagination
                ng-if="vm.usersOptions.totalPages"
                page-number="vm.usersOptions.pageNumber"
                total-pages="vm.usersOptions.totalPages"
                on-change="vm.changePageNumber(pageNumber)">
            </umb-pagination>
        </div>

    </div>

    <!-- Add user -->
    <div ng-if="vm.usersViewState === 'inviteUser' || vm.usersViewState === 'createUser'">

        <umb-editor-sub-header>
            <umb-editor-sub-header-content-left>
                <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
            </umb-editor-sub-header-content-left>
        </umb-editor-sub-header>

        <div class="flex justify-center">
            <form name="addUserForm" no-validate val-form-manager style="max-width: 500px;" class="block-form">
                <div>
                    <div ng-if="vm.usersViewState === 'inviteUser'">
                        <h3 class="bold" style="margin-bottom: 0;">
                            <localize key="user_inviteUser">Invite User</localize>
                        </h3>
                        <p style="line-height: 1.6em; margin-bottom: 15px;">
                            <localize key="user_inviteUserHelp"></localize>
                        </p>
                    </div>
                    <div ng-if="vm.usersViewState === 'createUser'">
                        <h3 class="bold" style="margin-bottom: 0;">
                            <localize key="user_createUser">Create user</localize>
                        </h3>
                        <p style="line-height: 1.6em; margin-bottom: 15px;">
                            <localize key="user_createUserHelp"></localize>
                        </p>
                    </div>
                </div>

                <umb-control-group label="@general_name" label-for="name" required="true">
                    <input type="text" name="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
                        umb-auto-focus required val-server-field="Name" />
                    <span class="help-inline" val-msg-for="name" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                    <span class="help-inline" val-msg-for="name" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <umb-control-group label="@general_username" label-for="username" required="true" ng-if="!vm.usernameIsEmail">
                    <input type="text" name="username" localize="placeholder" placeholder="@placeholders_enterusername" class="input-block-level"
                        ng-model="vm.newUser.username" val-server-field="Username" ng-required="vm.usernameIsEmail" />
                    <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="@general_email" label-for="email" required="true">
                    <input type="email" name="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
                        ng-model="vm.newUser.email" required val-email 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="@user_usergroup" description="@user_groupsHelp" required="true">
                    
                    <umb-user-group-preview
                        ng-repeat="group in vm.newUser.userGroups"
                        icon="group.icon"
                        name="group.name"
                        sections="group.sections"
                        content-start-node="group.contentStartNode"
                        media-start-node="group.mediaStartNode"
                        allow-remove="true"
                        on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
                    </umb-user-group-preview>

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

                </umb-control-group>

                <umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message" required="true">
                    <textarea
                        name="message"
                        type="text"
                        class="input-block-level"
                        localize="placeholder"
                        placeholder="@placeholders_enterMessage"
                        ng-model="vm.newUser.message"
                        rows="4"
                        required val-server-field="Message">
                    </textarea>
                    <span class="help-inline" val-msg-for="message" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                    <span class="help-inline" val-msg-for="message" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <umb-button
                    ng-if="vm.usersViewState === 'inviteUser'"
                    button-style="success"
                    state="vm.page.createButtonState"
                    type="button"
                    action="vm.inviteUser(addUserForm)"
                    label-key="user_sendInvite"
                    size="m">
                </umb-button>

                <umb-button
                    ng-if="vm.usersViewState === 'createUser'"
                    button-style="success"
                    state="vm.page.createButtonState"
                    type="button"
                    action="vm.createUser(addUserForm)"
                    label-key="user_createUser"
                    size="m">
                </umb-button>

            </form>

        </div>
    </div>

    <!-- Create user success -->
    <div ng-if="vm.usersViewState === 'createUserSuccess'">
        
        <umb-editor-sub-header>
            <umb-editor-sub-header-content-left>
                <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
            </umb-editor-sub-header-content-left>
        </umb-editor-sub-header>

        <div class="flex justify-center">
            <div style="max-width: 500px;">
                
                <!-- Success text -->
                <div class="flex items-center" style="margin-bottom: 15px;">
                    <umb-checkmark
                        checked="vm.usersViewState === 'createUserSuccess'"
                        size="m">
                    </umb-checkmark>
                    <h3 class="bold" style="margin: 0 0 0 10px;">
                        {{vm.newUser.name | umbWordLimit:1}}
                        <localize key="user_userCreated">has been created</localize>
                    </h3>
                </div>

                <p style="line-height: 1.6em; margin-bottom: 20px;"><localize key="user_userCreatedSuccessHelp"></localize></p>
                
                <!-- New password -->
                <div>
                    <label class="bold"><localize key="user_password">Password</localize></label>
                    <div class="flex items-center justify-between" style="background-color: #f3f3f5; padding: 10px 20px; border-radius: 3px; margin-bottom: 30px;">
                        <div ng-show="vm.newUser.showPassword">{{vm.newUser.resetPasswordValue}}</div>
                        <div ng-show="!vm.newUser.showPassword">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</div>
                        <div>
                            <umb-button
                                ng-if="!vm.newUser.showPassword"
                                type="button"
                                action="vm.toggleNewUserPassword()"
                                label-key="general_show"
                                size="xs">
                            </umb-button>
                            <umb-button
                                ng-if="vm.newUser.showPassword"
                                type="button"
                                action="vm.toggleNewUserPassword()"
                                label-key="general_hide"
                                size="xs">
                            </umb-button>
                            <umb-button
                                ng-if="vm.newUser.resetPasswordValue"
                                umb-clipboard
                                umb-clipboard-success="vm.copySuccess()"
                                umb-clipboard-error="vm.copyError()"
                                umb-clipboard-text="vm.newUser.resetPasswordValue"
                                state="vm.page.copyPasswordButtonState"
                                type="button"
                                label-key="general_copy" size="xs">
                            </umb-button>
                        </div>
                    </div>
                </div>

                <!-- actions -->
                <div>
                    <umb-button
                        type="button" button-style="info"
                        label-key="user_createAnotherUser"
                        action="vm.setUsersViewState('createUser');"
                        size="m">
                    </umb-button>
                    <umb-button
                        type="button"
                        button-style="success"
                        label-key="user_goToProfile"
                        action="vm.goToUser(vm.newUser.id);"
                        size="m">
                    </umb-button>
                </div>

            </div>
        </div>
    </div>

    <!-- Invite user success -->
    <div ng-if="vm.usersViewState === 'inviteUserSuccess'">
        <umb-editor-sub-header>
            <umb-editor-sub-header-content-left>
                <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
            </umb-editor-sub-header-content-left>
        </umb-editor-sub-header>

        <div class="flex justify-center">
            <div style="max-width: 500px;">

                <!-- Success text -->
                <div class="flex items-center" style="margin-bottom: 15px;">
                    <umb-checkmark
                        checked="vm.usersViewState === 'inviteUserSuccess'"
                        size="m">
                    </umb-checkmark>
                    <h3 class="bold" style="margin: 0 0 0 10px;">
                        {{vm.newUser.name | umbWordLimit:1}}
                        <localize key="user_userInvited">has been created</localize>
                    </h3>
                </div>

                <p style="line-height: 1.6em; margin-bottom: 20px;"><localize key="user_userInvitedSuccessHelp"></localize></p>

                <!-- actions -->
                <div>
                    <umb-button
                        type="button" button-style="info"
                        label-key="user_inviteAnotherUser"
                        action="vm.setUsersViewState('inviteUser');"
                        size="m">
                    </umb-button>
                    <umb-button
                        type="button"
                        button-style="success"
                        label-key="user_goToProfile"
                        action="vm.goToUser(vm.newUser.id);"
                        size="m">
                    </umb-button>
                </div>

            </div>
        </div>

    </div>

    <umb-overlay
        ng-if="vm.userGroupPicker.show"
        model="vm.userGroupPicker"
        view="vm.userGroupPicker.view"
        position="right">
    </umb-overlay>

</div>