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

{% block title %}Two-factor authentication enabled{% endblock %}
{% block heading %}Two-factor authentication is on{% endblock %}
{% block subheading %}Your account now asks for a code at every login{% endblock %}

{% block card %}
{% if recovery_codes %}
<div id="recovery-codes" class="mb-6">
    <h2 class="text-sm font-semibold mb-1" style="color: var(--text-primary);">Recovery codes (shown once)</h2>
    <p class="text-sm mb-3" style="color: var(--text-secondary); line-height: 1.6;">
        Save them somewhere safe. Each code signs you in once if you lose your authenticator.
    </p>
    <ul class="grid grid-cols-2 gap-2">
        {% for code in recovery_codes %}
        <li><code class="block rounded-md px-3 py-2 text-center text-sm font-mono select-all" style="background: var(--surface-2); color: var(--text-primary);">{{ code }}</code></li>
        {% endfor %}
    </ul>
</div>
{% else %}
<p class="text-sm mb-6" style="color: var(--text-secondary); line-height: 1.6;">
    Your recovery codes were already shown and can't be displayed again.
</p>
{% endif %}
<a href="{% url 'dashboard' %}" class="btn-brand text-center">Continue to dashboard</a>
{% endblock %}