{{template "main-top" .}}

<div class="lgn-head">
    {{ template "user-profile" . }}

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

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

    {{ .CSRF }}

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

    <div class="fields">
        {{ range $provider := .MFAProviders}}
        {{ $providerName := (t (printf "MFAPrompt.Provider%v" $provider)) }}
            <div class="lgn-radio block">
                <input id="{{ $provider }}" type="radio" name="provider" value="{{ $provider }}">
                <label for="{{ $provider }}">{{ $providerName }}</label>
            </div>
        {{ end }}
    </div>

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

        {{if not .MFARequired}}
        <button class="lgn-stroked-button lgn-primary" name="skip" value="true" type="submit" formnovalidate>{{t "Actions.Skip"}}</button>
        {{end}}
        <span class="fill-space"></span>
        <button class="lgn-raised-button lgn-primary" type="submit">{{t "Actions.Next"}}</button>
    </div>
</form>


{{template "main-bottom" .}}