{{template "main-top" .}}

{{ template "user-profile" . }}

<p>{{t "MfaInitVerify.Description"}}</p>

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

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
    <input type="hidden" name="mfaType" value="{{ .MfaType }}" />
    <input type="hidden" name="url" value="{{ .Url }}" />
    <input type="hidden" name="secret" value="{{ .Secret }}" />

    {{if (eq .MfaType 0) }}
        <p>{{t "MfaInitVerify.OtpDescription"}}</p>
        <div id="qrcode">
            {{.QrCode}}
        </div>
        <div class="fields">
            <div class="field">
                <span class="label" for="secret">{{t "MfaInitVerify.Secret"}}</span>
                <span class="input" id="secret">
                    {{.Secret}}
                    <span class="copy material-icons" data-copy="{{ .Secret }}" >content_copy</span>
                </span>
            </div>
            <div class="field">
               <label class="label" for="code">{{t "MfaInitVerify.Code"}}</label>
                <input class="input" type="text" id="code" name="code" autocomplete="off" autofocus required>
            </div>
        </div>
    {{end}}

    <div class="actions">
        <button class="primary right" id="submit-button" type="submit">{{t "Actions.Next"}}</button>
        <a href="{{ mfaPromptChangeUrl .AuthReqID .MfaType }}">
            <button class="secondary" type="button">{{t "Actions.Back"}}</button>
        </a>
        <a href="{{ loginUrl }}">
            <button class="secondary" type="button">{{t "Actions.Cancel"}}</button>
        </a>
    </div>
</form>

<script src="{{ resourceUrl "scripts/copy_to_clipboard.js" }}"></script>
<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/default_form_validation.js" }}"></script>

{{template "main-bottom" .}}