{{template "main-top" .}}

<div class="head">
    <h1>{{t "Passwordless.Title"}}</h1>
    {{ template "user-profile" . }}

    <p>{{t "Passwordless.Description"}}</p>
</div>

<form action="{{ passwordLessVerificationUrl }}" method="POST">

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}"/>
    <input type="hidden" name="credentialAssertionData" value="{{ .CredentialCreationData }}"/>
    <input type="hidden" name="credentialData"/>

    <p class="wa-no-support lgn-error hidden">{{t "Passwordless.NotSupported"}}</p>
    <div id="wa-error" class="error hidden">
        <span class="cause"></span>
        <span>{{t "Passwordless.ErrorRetry"}}</span>
    </div>

    {{ template "error-message" .}}

    <div class="lgn-actions" id="webauthn">
         <!-- position element in header -->
         <a class="lgn-icon-button lgn-left-action" href="{{ loginNameChangeUrl .AuthReqID }}">
            <i class="lgn-icon-arrow-left-solid"></i>
        </a>

        {{if .PasswordLogin}}
            <button class="lgn-stroked-button" name="passwordlogin" value="true" type="submit">{{t "Passwordless.LoginWithPwButtonText"}}</button>
        {{end}}
        <span class="fill-space"></span>
        <a id="btn-login" class="lgn-raised-button lgn-primary wa-support">{{t "Passwordless.ValidateTokenButtonText"}}</a>
    </div>
</form>

<script src="{{ resourceUrl "scripts/utils.js" }}"></script>
<script src="{{ resourceUrl "scripts/webauthn.js" }}"></script>
<script src="{{ resourceUrl "scripts/webauthn_login.js" }}"></script>

{{template "main-bottom" .}}