<div class="iz-page">

	<header class="iz-pagehead" aria-labelledby="iz-find-username-title">
		<h2 class="iz-pagehead__title" id="iz-find-username-title">{{ L_FIND_USERNAME }}</h2>
	</header>

	<form method="post" action="{{ S_MODE_ACTION }}" id="search_memberlist" class="iz-form">

		<section class="iz-card" aria-labelledby="iz-member-search-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-member-search-title">{{ L_FIND_USERNAME }}</h3>
			</header>

			<div class="iz-card__body">

				<p class="iz-help">{{ L_FIND_USERNAME_EXPLAIN }}</p>

				{% EVENT memberlist_search_fields_before %}

				<div class="iz-grid iz-grid--2">

					<div>
						<div class="iz-field">
							<label class="iz-label" for="username">{{ L_USERNAME }}{{ L_COLON }}</label>
							<input class="iz-input"
								   type="text"
								   name="username"
								   id="username"
								   value="{{ USERNAME }}"
								   placeholder="{{ L_USERNAME }}"
								   {% if U_LIVE_SEARCH %}autocomplete="off" data-filter="phpbb.search.filter" data-ajax="member_search" data-min-length="3" data-url="{{ U_LIVE_SEARCH }}" data-results="#user-search"{% endif %} />

							{% if U_LIVE_SEARCH %}
								<div class="iz-dropdown live-search hidden" id="user-search">
									<ul class="iz-dropdown__list dropdown-contents search-results">
										<li class="search-result-tpl"><span class="search-result"></span></li>
									</ul>
								</div>
							{% endif %}
						</div>

						{% if S_EMAIL_SEARCH_ALLOWED %}
							<div class="iz-field">
								<label class="iz-label" for="email">{{ L_EMAIL }}{{ L_COLON }}</label>
								<input class="iz-input" type="text" name="email" id="email" value="{{ EMAIL }}" placeholder="{{ L_EMAIL }}" />
							</div>
						{% endif %}

						{% if S_JABBER_ENABLED %}
							<div class="iz-field">
								<label class="iz-label" for="jabber">{{ L_JABBER }}{{ L_COLON }}</label>
								<input class="iz-input" type="text" name="jabber" id="jabber" value="{{ JABBER }}" placeholder="{{ L_UCP_JABBER }}" />
							</div>
						{% endif %}

						<div class="iz-field">
							<label class="iz-label" for="joined">{{ L_JOINED }}{{ L_COLON }}</label>
							<div class="iz-field__row iz-field__row--actions">
								<label class="iz-sr-only" for="joined_select">{{ L_JOINED }}</label>
								<select class="iz-select" name="joined_select" id="joined_select">{{ S_JOINED_TIME_OPTIONS }}</select>

								<input class="iz-input" type="text" name="joined" id="joined" value="{{ JOINED }}" placeholder="{{ L_YEAR_MONTH_DAY_PLACEHOLDER }}" />
							</div>
						</div>

						{% if S_IP_SEARCH_ALLOWED %}
							<div class="iz-field">
								<label class="iz-label" for="ip">{{ L_POST_IP }}{{ L_COLON }}</label>
								<input class="iz-input" type="text" name="ip" id="ip" value="{{ IP }}" placeholder="{{ L_IP_PLACEHOLDER }}" />
							</div>
						{% endif %}

						<div class="iz-field">
							<label class="iz-label" for="search_group_id">{{ L_GROUP }}{{ L_COLON }}</label>
							<select class="iz-select" name="search_group_id" id="search_group_id">{{ S_GROUP_SELECT }}</select>
						</div>
					</div>


					<div>
						{% if S_VIEWONLINE %}
							<div class="iz-field">
								<label class="iz-label" for="active">{{ L_LAST_ACTIVE }}{{ L_COLON }}</label>
								<div class="iz-field__row iz-field__row--actions">
									<label class="iz-sr-only" for="active_select">{{ L_LAST_ACTIVE }}</label>
									<select class="iz-select" name="active_select" id="active_select">{{ S_ACTIVE_TIME_OPTIONS }}</select>

									<input class="iz-input" type="text" name="active" id="active" value="{{ ACTIVE }}" placeholder="{{ L_YEAR_MONTH_DAY_PLACEHOLDER }}" />
								</div>
							</div>
						{% endif %}

						<div class="iz-field">
							<label class="iz-label" for="count">{{ L_POSTS }}{{ L_COLON }}</label>
							<div class="iz-field__row iz-field__row--actions">
								<label class="iz-sr-only" for="count_select">{{ L_POSTS }}</label>
								<select class="iz-select" name="count_select" id="count_select">{{ S_COUNT_OPTIONS }}</select>

								<input class="iz-input" type="text" name="count" id="count" value="{{ COUNT }}" placeholder="{{ L_POSTS_PLACEHOLDER }}" />
							</div>
						</div>

						{% EVENT memberlist_search_sorting_options_before %}

						<div class="iz-field">
							<label class="iz-label" for="sk">{{ L_SORT_BY }}{{ L_COLON }}</label>
							<select class="iz-select" name="sk" id="sk">{{ S_SORT_OPTIONS }}</select>
						</div>

						<div class="iz-field">
							<label class="iz-label" for="sd">{{ L_ORDER }}{{ L_COLON }}</label>
							<select class="iz-select" name="sd" id="sd">{{ S_ORDER_SELECT }}</select>
						</div>

						{% EVENT memberlist_search_fields_after %}
					</div>

				</div>

				<fieldset class="iz-actions iz-actions--inline">
					<button type="submit" name="submit" value="{{ L_SEARCH }}" class="iz-btn iz-btn--primary">
						{{ L_SEARCH }}
					</button>
					{{ S_FORM_TOKEN }}
				</fieldset>

			</div>
		</section>

	</form>

</div>
