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

<xf:pageaction>
	<xf:button href="{{ link('users/add') }}" icon="add">{{ phrase('add_user') }}</xf:button>
</xf:pageaction>

<xf:if is="$lastUser">
	<div class="blockMessage blockMessage--highlight">
		<div class="contentRow">
			<span class="contentRow-figure">
				<xf:avatar user="$lastUser" size="s" />
			</span>
			<div class="contentRow-main">
				<h2 class="contentRow-title">{{ phrase('changes_saved') }}</h2>
				<a href="{{ link('users/edit', $lastUser) }}">{{ phrase('edit_x_again', {'name': $lastUser.username}) }}</a>
			</div>
		</div>
	</div>
</xf:if>

<div class="block">
	<div class="block-container">
		<h2 class="block-tabHeader tabs" data-xf-init="tabs" role="tablist">
			<a class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="user-search">{{ phrase('standard_search') }}</a>
			<a class="tabs-tab" role="tab" tabindex="0" aria-controls="ip-search">{{ phrase('search_by_ip_address') }}</a>
		</h2>

		<ul class="tabPanes">
			<li class="is-active" role="tabpanel" id="user-search">
				<xf:form action="{{ link('users/list') }}">
					<div class="block-body">
						<xf:include template="helper_user_search_criteria" />

						<hr class="formRowSep" />

						<xf:formrow rowtype="input"
							label="{{ phrase('sort') }}">

							<div class="inputPair">
								<xf:select name="order">
									<xf:options source="{$sortOrders}" />
								</xf:select>
								<xf:select name="direction">
									<xf:option value="asc">{{ phrase('ascending') }}</xf:option>
									<xf:option value="desc">{{ phrase('descending') }}</xf:option>
								</xf:select>
							</div>
						</xf:formrow>
					</div>
					<xf:submitrow sticky="true" icon="search" />
				</xf:form>
			</li>
			<li role="tabpanel" id="ip-search">
				<xf:form action="{{ link('users/ip-users') }}">
					<div class="block-body">
						<xf:textboxrow name="ip"
							label="{{ phrase('ip_address') }}"
							explain="{{ phrase('ip_search_explain') }}" />
					</div>
					<xf:submitrow icon="search" />
				</xf:form>
			</li>
		</ul>
	</div>
</div>