{% extends "account/totp/base.html" %}

{% block title %}Set up two-factor authentication{% endblock %}
{% block heading %}Set up two-factor authentication{% endblock %}
{% block subheading %}Protect your account with an authenticator app{% endblock %}

{% block card %}
<ol class="space-y-5 text-sm mb-6" style="color: var(--text-secondary); line-height: 1.6;">
    <li>
        <span class="font-semibold" style="color: var(--text-primary);">1. Scan this QR code</span>
        with Google Authenticator, 1Password, Authy or any TOTP app.
        <div class="mt-3 flex justify-center">
            <div class="rounded-lg overflow-hidden" style="border: 1.5px solid var(--border);">{{ qr_svg }}</div>
        </div>
    </li>
    <li>
        <span class="font-semibold" style="color: var(--text-primary);">Can't scan it?</span>
        Enter this key manually:
        <code class="mt-2 block break-all rounded-md px-3 py-2 text-xs font-mono select-all" style="background: var(--surface-2); color: var(--text-primary);">{{ secret }}</code>
        <details class="mt-2">
            <summary class="cursor-pointer text-xs" style="color: var(--text-secondary);">Show setup link</summary>
            <code class="mt-2 block break-all text-xs font-mono select-all" style="color: var(--text-secondary);">{{ otpauth_uri }}</code>
        </details>
    </li>
    <li>
        <span class="font-semibold" style="color: var(--text-primary);">2. Enter the 6-digit code</span>
        your app shows to finish.
    </li>
</ol>
{% include "account/totp/_code_form.html" with code_label="Authentication code" code_maxlength=6 submit_label="Activate 2FA" %}
{% endblock %}