<div ng-controller="Umbraco.Overlays.UserPickerController as vm">

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

    <div class="form-search" style="margin-bottom: 15px;">
        <i class="icon-search"></i>
        <input type="text"
            ng-model="vm.usersOptions.filter"
            ng-change="vm.searchUsers()"
            class="umb-search-field search-query input-block-level -full-width-input"
            localize="placeholder"
            placeholder="@placeholders_filter"
            umb-auto-focus
            revent-enter-submit
            no-dirty-check />
    </div>

    <div ng-if="!vm.loading">

        <div class="umb-user-picker-item-list">
            <a href="" class="umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
                <div class="umb-user-picker-list-item__avatar">
                    <umb-checkmark
                        class="umb-user-picker-list-item__checkmark" 
                        ng-if="user.selected"
                        checked="user.selected">
                    </umb-checkmark>
                    <umb-avatar
                        size="s"
                        color="secondary"
                        name="{{user.name}}"
                        img-src="{{user.avatars[0]}}"
                        img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
                    </umb-avatar>
                </div>
                <div class="umb-user-picker-list-item__content">
                    <div class="umb-user-picker-list-item__name">{{ user.name }}</div>
                    <div class="umb-user-picker-list-item__group">
                        <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
                    </div>
                </div>
            </a>
        </div>

        <div 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>

</div>