<xf:title>{{ phrase('users') }}</xf:title>

<xf:pageaction>
	<xf:button href="{{ link('users/list-export', null, {
		'export': 1,
		'criteria': $criteria,
		'order': $order,
		'direction': $direction
	}) }}" fa="fa-file-export" title="{{ phrase('export_user_list_desc') }}" data-xf-init="_tooltip">{{ phrase('export_user_list') }}</xf:button>
</xf:pageaction>

<xf:if is="$users is not empty">
	<xf:form action="{{ link('users/batch-update/confirm') }}" class="block">
		<xf:if is="!$showingAll">
			<div class="block-outer">
				<div class="block-outer-main">
					<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">
						{{ phrase('sort_by:') }} {{ $sortOptions.{$order} ?: phrase('user_name') }}
					</xf:button>

					<div class="menu" data-menu="menu" aria-hidden="true">
						<div class="menu-content">
							<h3 class="menu-header">{{ phrase('sort_by...') }}</h3>
							<xf:foreach loop="$sortOptions" key="$sortKey" value="$sortName">
								<a href="{{ link('users/list', null, {'criteria': $criteria, 'order': $sortKey}) }}"
									class="menu-linkRow {{ $order == $sortKey ? 'is-selected' : '' }}">
									{$sortName}
								</a>
							</xf:foreach>
						</div>
					</div>
				</div>
				<xf:macro id="filter_macros::quick_filter" arg-key="users"
					arg-ajax="{{ link('users/list', null, {'criteria': $criteria, 'order': $order, 'direction': $direction}) }}"
					arg-class="block-outer-opposite" />
			</div>
		</xf:if>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:if is="$showingAll">
						<xf:datarow rowtype="header" rowclass="dataList-row--noHover">
							<xf:if is="$showingAll">
								<xf:cell colspan="4">
									<xf:checkbox standalone="true"><xf:option value="{$user.user_id}" check-all=".dataList >" label="{{ phrase('select_all') }}" /></xf:checkbox>
								</xf:cell>
							</xf:if>
						</xf:datarow>
					</xf:if>
					<xf:foreach loop="$users" value="$user">
						<xf:datarow rowclass="{{ ($user.user_state != 'valid' || $user.is_banned) ? 'dataList-row--deleted' : '' }}">
							<xf:if is="$showingAll">
								<xf:toggle name="user_ids[]" value="{$user.user_id}" selected="true" />
							</xf:if>
							<xf:cell class="dataList-cell--min dataList-cell--image dataList-cell--imageSmall"
								href="{{ link('users/edit', $user) }}">
								<xf:avatar user="$user" size="s" href="" />
							</xf:cell>
							<xf:main href="{{ link('users/edit', $user) }}">
								<xf:label><xf:username user="$user" rich="true" notooltip="true" href="" /></xf:label>
								<xf:hint>{$user.email|email_display}</xf:hint>
							</xf:main>
							<xf:delete href="{{ link('users/delete', $user) }}" />
						</xf:datarow>
					</xf:foreach>
					<xf:if is="$filter AND $total > $perPage">
						<xf:datarow rowclass="dataList-row--note dataList-row--noHover js-filterForceShow">
							<xf:cell colspan="3">{{ phrase('more_records_matching_filter_more_specific') }}
							</xf:cell>
						</xf:datarow>
					</xf:if>
				</xf:datalist>
			</div>
			<div class="block-footer block-footer--split">
				<span class="block-footer-counter">{{ display_totals($users, $total) }}</span>
				<xf:if is="$showAll">
					<span class="block-footer-controls"><a href="{{ link('users/list', null, {'criteria': $criteria, 'all': true}) }}">{{
						phrase('show_all_matches') }}</a></span>
				<xf:elseif is="$showingAll" />
					<span class="block-footer-select"><xf:checkbox standalone="true"><xf:option check-all=".dataList" label="{{ phrase('select_all') }}" /></xf:checkbox></span>
					<span class="block-footer-controls"><xf:button type="submit">{{ phrase('batch_update') }}</xf:button></span>
				</xf:if>
			</div>
		</div>

		<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
			link="users/list"
			params="{{ {'criteria': $criteria, 'order': $order, 'direction': $direction} }}"
			wrapperclass="js-filterHide block-outer block-outer--after" />
	</xf:form>
<xf:else />
	<div class="blockMessage">{{ phrase('no_records_matched') }}</div>
</xf:if>