<xf:page option="template">LOGIN_CONTAINER</xf:page>

<xf:js src="xf/webauthn.js" min="1" />

<div class="adminLogin-contentForm">
	<xf:form action="{{ link('login/login') }}" ajax="true">
		<div><a href="{$xf.options.boardUrl}"><img src="{{ base_url('styles/default/xenforo/xenforo-logo.svg') }}"
			width="100" height="36" alt="XenForo Ltd." /></a></div>
		<!--<h1>{$xf.options.boardTitle}</h1>-->
		<dl class="adminLogin-row">
			<dt>{{ phrase('your_name_or_email_address:') }}</dt>
			<dd>
				<xf:textbox name="login" value="{$xf.visitor.username}"
					placeholder="{{ phrase('user_name_or_email...') }}"
					aria-label="{{ phrase('user_name_or_email') }}"
					autofocus="autofocus" />
				<xf:fa icon="fa-user" />
			</dd>
		</dl>
		<dl class="adminLogin-row">
			<dt>{{ phrase('password:') }}</dt>
			<dd>
				<xf:set var="$afterInput"><xf:fa icon="fa-key" /></xf:set>
				<xf:passwordbox name="password" placeholder="{{ phrase('password...') }}"
					aria-label="{{ phrase('password') }}"
					afterinputhtml="{$afterInput}" />
			</dd>
		</dl>
		<div class="adminLogin-row adminLogin-row--submit">
			<xf:button type="submit" icon="login">{{ phrase('admin_login') }}</xf:button>
		</div>
	</xf:form>

	<xf:if is="$xf.request.isSecure()">
		<div class="u-jsOnly">
			<div class="blocks-textJoiner"><span></span><em>{{ phrase('or_separator') }}</em><span></span></div>

			<xf:form action="{{ link('login/login') }}" data-xf-init="webauthn"
				data-type="get"
				data-autotrigger="false"
				data-autosubmit="true"
				data-verifying="{{ phrase('verifying...') }}">

				<div class="adminLogin-row adminLogin-row--submit">
					<xf:button class="button--icon button--provider button--provider--passkey js-webauthnStart">
						{{ phrase('passkey_login') }}
					</xf:button>

					<xf:hiddenval name="webauthn_payload" />
					<xf:hiddenval name="webauthn_challenge">{{ $passkey ? $passkey.getChallenge() : '' }}</xf:hiddenval>
				</div>
			</xf:form>
		</div>
	</xf:if>

	<div class="adminLogin-boardTitle">{$xf.options.boardTitle}</div>

</div>