superdesk/superdesk-client-core

<div class="subnav subnav--absolute">
    <h3 class="subnav__page-title" translate>Users</h3>
    <div class="subnav__button-stack--square-buttons" sd-tooltip="{{ :: 'Create user' | translate }}" flow="left">
        <button class="navbtn sd-create-btn" ng-click="createUser()" data-test-id="create-user-button"></button>
    </div>
</div>

<section class="main-section users">
    <div class="preview-layout" ng-class="{closed: !selected.user}">
        <div class="list-pane">
            <div class="subnav">
                <div sd-searchbar></div>
                <div class="button-list button-list--padded">
                    <button type="button" class="toggle-button" ng-click="authorOnlyFilter=!authorOnlyFilter" ng-class="{'toggle-button--active': !authorOnlyFilter}">{{:: 'All user types' | translate}}</button>
                    <button type="button" class="toggle-button" ng-click="authorOnlyFilter=!authorOnlyFilter" ng-class="{'toggle-button--active': authorOnlyFilter}">{{:: 'Authors only' | translate}}</button>
                </div>
                <div class="sd-line-input sd-line-input--is-select sd-line-input--no-label sd-line-input--no-margin" style="min-width:100px; margin:0 40px;">
                    <select class="sd-line-input__select" 
                        ng-model="userFilter"
                        ng-options="filter.id as filter.label | translate for filter in filterOptions" data-test-id="user-filter">
                    </select>
                </div>
                <div class="subnav__element-grow"></div>
                <div sd-pagination data-items="users" class="pull-right"></div>
            </div>
            <div class="content">
                <div sd-shadow>
                    <div class="alert alert-error" ng-if="noRolesWarning" translate>No user roles defined!</div>
                    <div class="users-table">
                        <ul class="table-header">
                            <li>
                                <div class="row-wrapper">
                                    <div class="name" sd-sort data-label="{{ 'Full name' | translate }}" data-field="full_name"></div>
                                    <div class="username" sd-sort data-label="{{ 'Username' | translate }}" data-field="username"></div>
                                    <div class="role" translate>Role</div>
                                    <div class="email" sd-sort data-label="{{ 'Email' | translate }}" data-field="email"></div>
                                    <div class="created" sd-sort data-label="{{ 'Created' | translate }}" data-field="_created"></div>
                                </div>
                            </li>
                        </ul>

                        <div class="table-title" ng-show="createdUsers.length" translate>Recently added</div>

                        <ul class="table-newest"
                            sd-user-list
                            data-roles="roles"
                            data-users="createdUsers"
                            data-selected="selected.user"
                            data-done="afterDelete"
                            ng-if="createdUsers.length">
                        </ul>

                        <ul class="table-body"
                            sd-user-list
                            data-roles="roles"
                            data-users="users._items"
                            data-author-only-filter="authorOnlyFilter"
                            data-selected="selected.user"
                            data-done="afterDelete">
                        </ul>
                    </div>
                </div>
            </div>

            <div class="preview-pane" ng-if="selected.user">
                <header>
                    <button ng-click="intent('detail', 'user', selected.user)" class="btn btn--small btn--hollow sd-margin-start--2" ng-show="selected.user._id" id="open-user-profile" translate>View full profile</button>
                    <button ng-click="selected.user = null" class="icn-btn close-preview"><i class="icon-close-small"></i></button>
                </header>
                <div sd-user-details-pane ng-if="selected.user">
                    <div sd-user-edit data-user="selected.user" data-onsave="render(user)" data-oncancel="closePreview()"></div>
                </div>
            </div>


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