{{template "main-top" .}}

<div class="head">
    <h1>{{t "VerifyMFAU2F.Title"}}</h1>

    {{ template "user-profile" . }}

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

<form action="{{ mfaInitU2FLoginUrl }}" 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 "VerifyMFAU2F.NotSupported"}}</p>

    <div id="wa-error" class="error hidden">
        <span class="cause"></span>
        <span>{{t "VerifyMFAU2F.ErrorRetry"}}</span>
    </div>

    {{ template "error-message" .}}

    <div class="lgn-actions" id="webauthn">
        <span class="fill-space"></span>
        <a id="btn-login" class="lgn-raised-button lgn-primary wa-support">{{t "VerifyMFAU2F.ValidateTokenButtonText"}}</a>
    </div>

    {{ if .MFAProviders }}
        <div class="lgn-mfa-other">
            <p>{{t "MFAProvider.ChooseOther"}}</p>
            {{ range $provider := .MFAProviders}}
                {{ $providerName := (t (printf "MFAProvider.Provider%v" $provider)) }}
                <button class="lgn-stroked-button" type="submit" name="provider" value="{{$provider}}">{{$providerName}}</button>
            {{ end }}
        </div>
    {{ end }}
</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" .}}