<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 ng-class="{'--state-selection':(vm.selection.length > 0)}">

            <!-- No selection -->
            <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
                <umb-button-group
                    ng-if="vm.defaultButton"
                    button-style="outline"
                    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(layout)">
                    </umb-layout-selector>
                </umb-editor-sub-header-section>
                <umb-editor-sub-header-section>

                    <umb-mini-search model="vm.usersOptions.filter" on-search="vm.searchUsers()" on-blur="vm.onBlurSearch()">
                    </umb-mini-search>

                </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"
                        button-style="white"
                        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">
                <umb-button
                    style="margin-right: 5px;"
                    disabled="!vm.allowSetUserGroup"
                    type="button"
                    size="xs"
                    button-style="white"
                    label-key="actions_setGroup"
                    icon="icon-users"
                    action="vm.openBulkUserGroupPicker()">
                </umb-button>

                <umb-button
                    style="margin-right: 5px;"
                    disabled="!vm.allowEnableUser"
                    type="button"
                    size="xs"
                    button-style="white"
                    state="vm.enableUserButtonState"
                    label-key="actions_enable"
                    icon="icon-check"
                    action="vm.enableUsers()">
                </umb-button>

                <umb-button
                    style="margin-right: 5px;"
                    disabled="!vm.allowUnlockUser"
                    type="button"
                    size="xs"
                    button-style="white"
                    state="vm.unlockUserButtonState"
                    label-key="actions_unlock"
                    icon="icon-unlocked"
                    action="vm.unlockUsers()">
                </umb-button>

                <umb-button
                    disabled="!vm.allowDisableUser"
                    type="button"
                    size="xs"
                    button-style="white"
                    state="vm.disableUserButtonState"
                    label-key="actions_disable"
                    icon="icon-block"
                    action="vm.disableUsers()">
                </umb-button>

            </umb-editor-sub-header-content-right>

        </umb-editor-sub-header>

        <!-- Filters -->
        <div class="flex items-center mb3">

            <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 ml-auto">
                <!-- State filter -->
                <div class="umb-filter" ng-if="vm.userStatesFilter.length > 0">
                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('state')">
                        <span><localize key="general_status">Status</localize>:</span>
                        <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
                        <span class="caret" aria-hidden="true"></span>
                    </button>
                    <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:{ key: '!All'}" ng-show="userState.count > 0" style="padding: 8px 20px 8px 16px;">
                            <div class="flex items-center">
                                <umb-checkbox input-id="userstate-{{$index}}"
                                              name="userstate"
                                              model="userState.selected"
                                              on-change="vm.setUserStatesFilter(userState)">
                                </umb-checkbox>
                                <label for="userstate-{{$index}}">
                                    <umb-badge size="s" color="{{userState.color}}">{{userState.name}} <span class="ml1 umb-badge__count">{{userState.count}}</span></umb-badge>
                                </label>
                            </div>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

                <!-- Groups filter -->
                <div class="umb-filter">
                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('group')">
                        <span><localize key="general_groups">Groups</localize>:</span>
                        <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userGroups) }}</span>
                        <span class="caret" aria-hidden="true"></span>
                    </button>
                    <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">
                                <umb-checkbox input-id="usergroup-{{$index}}"
                                              name="usergroup"
                                              model="userGroup.selected"
                                              on-change="vm.setUserGroupFilter(userGroup)">
                                </umb-checkbox>
                                <label for="usergroup-{{$index}}">
                                    <span class="flex items-center">
                                        <i class="{{userGroup.icon}}" aria-hidden="true"></i>
                                        <span class="ml1">{{userGroup.name}}</span>
                                    </span>
                                </label>
                            </div>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

                <!-- Order By -->
                <div class="umb-filter">
                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('orderBy')">
                        <span><localize key="general_orderBy">Order by</localize>:</span>
                        <span class="bold truncate dib umb-filter__label">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
                        <span class="caret" aria-hidden="true"></span>
                    </button>
                    <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">
                            <button type="button" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)">{{sortData.label}}</button>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

            </div>

        </div>

        <!-- Empty states -->
        <umb-empty-state<commit_msg>Use custom SVG icon in user group filter<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 ng-class="{'--state-selection':(vm.selection.length > 0)}">

            <!-- No selection -->
            <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
                <umb-button-group
                    ng-if="vm.defaultButton"
                    button-style="outline"
                    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(layout)">
                    </umb-layout-selector>
                </umb-editor-sub-header-section>
                <umb-editor-sub-header-section>

                    <umb-mini-search model="vm.usersOptions.filter" on-search="vm.searchUsers()" on-blur="vm.onBlurSearch()">
                    </umb-mini-search>

                </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"
                        button-style="white"
                        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">
                <umb-button
                    style="margin-right: 5px;"
                    disabled="!vm.allowSetUserGroup"
                    type="button"
                    size="xs"
                    button-style="white"
                    label-key="actions_setGroup"
                    icon="icon-users"
                    action="vm.openBulkUserGroupPicker()">
                </umb-button>

                <umb-button
                    style="margin-right: 5px;"
                    disabled="!vm.allowEnableUser"
                    type="button"
                    size="xs"
                    button-style="white"
                    state="vm.enableUserButtonState"
                    label-key="actions_enable"
                    icon="icon-check"
                    action="vm.enableUsers()">
                </umb-button>

                <umb-button
                    style="margin-right: 5px;"
                    disabled="!vm.allowUnlockUser"
                    type="button"
                    size="xs"
                    button-style="white"
                    state="vm.unlockUserButtonState"
                    label-key="actions_unlock"
                    icon="icon-unlocked"
                    action="vm.unlockUsers()">
                </umb-button>

                <umb-button
                    disabled="!vm.allowDisableUser"
                    type="button"
                    size="xs"
                    button-style="white"
                    state="vm.disableUserButtonState"
                    label-key="actions_disable"
                    icon="icon-block"
                    action="vm.disableUsers()">
                </umb-button>

            </umb-editor-sub-header-content-right>

        </umb-editor-sub-header>

        <!-- Filters -->
        <div class="flex items-center mb3">

            <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 ml-auto">
                <!-- State filter -->
                <div class="umb-filter" ng-if="vm.userStatesFilter.length > 0">
                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('state')">
                        <span><localize key="general_status">Status</localize>:</span>
                        <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
                        <span class="caret" aria-hidden="true"></span>
                    </button>
                    <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:{ key: '!All'}" ng-show="userState.count > 0" style="padding: 8px 20px 8px 16px;">
                            <div class="flex items-center">
                                <umb-checkbox input-id="userstate-{{$index}}"
                                              name="userstate"
                                              model="userState.selected"
                                              on-change="vm.setUserStatesFilter(userState)">
                                </umb-checkbox>
                                <label for="userstate-{{$index}}">
                                    <umb-badge size="s" color="{{userState.color}}">{{userState.name}} <span class="ml1 umb-badge__count">{{userState.count}}</span></umb-badge>
                                </label>
                            </div>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

                <!-- Groups filter -->
                <div class="umb-filter">
                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('group')">
                        <span><localize key="general_groups">Groups</localize>:</span>
                        <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userGroups) }}</span>
                        <span class="caret" aria-hidden="true"></span>
                    </button>
                    <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">
                                <umb-checkbox input-id="usergroup-{{$index}}"
                                              name="usergroup"
                                              model="userGroup.selected"
                                              on-change="vm.setUserGroupFilter(userGroup)">
                                </umb-checkbox>
                                <label for="usergroup-{{$index}}">
                                    <span class="flex items-center">
                                        <umb-icon icon="{{userGroup.icon}}" class="{{userGroup.icon}}"></umb-icon>
                                        <span class="ml1">{{userGroup.name}}</span>
                                    </span>
                                </label>
                            </div>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

                <!-- Order By -->
                <div class="umb-filter">
                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('orderBy')">
                        <span><localize key="general_orderBy">Order by</localize>:</span>
                        <span class="bold truncate dib umb-filter__label">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
                        <span class="caret" aria-hidden="true"></span>
                    </button>
                    <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">
                            <button type="button" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)">{{sortData.label}}</button>
                        </umb-dropdown-item>
                    </umb-dropdown>
                </div>

            </div>

        </div>

        <!-- Empty states -->
        <umb-empty-state
{'fraction_non_alphanumeric': 0.13458630373730826, 'fraction_numerical': 0.002916396629941672, 'mean_word_length': 1.288875154511743, 'pattern_counts': {'":': 0, '<': 277, '<?xml version=': 0, '>': 285, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 35, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6743287', 'n_tokens_mistral': 4805, 'n_tokens_neox': 4386, 'n_words': 636}