<commit_before><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"
                    button-style="success"
                    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;"><commit_msg>add track by to users ng-repeat<commit_after><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"
                    button-style="success"
                    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 track by user.key" 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 track by user.key" 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;">
{'fraction_non_alphanumeric': 0.14014359403317997, 'fraction_numerical': 0.004600585529067336, 'mean_word_length': 1.1981919865165096, 'pattern_counts': {'":': 0, '<': 471, '<?xml version=': 0, '>': 483, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6439561', 'n_tokens_mistral': 7605, 'n_tokens_neox': 6952, 'n_words': 1094}