{% extends "base.html" %}
{% block title %}Recovery codes - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>Your recovery codes</h1>
            <p class="rf-lede">Two-factor authentication is {{ context }}. Save these codes now.</p>
        </div>
    </div>

    <section class="rf-form-card">
        <p class="rf-message rf-message-ok"><strong>Store these somewhere safe - they are shown once and
            will not be shown again.</strong> Each code works once. If you lose your authenticator app,
            enter one of these at the two-factor step to get back in.</p>
        <ul class="rf-code-list">
            {% for code in codes %}<li class="rf-code-box">{{ code }}</li>{% endfor %}
        </ul>
        <p class="hint">Generating new codes later replaces all of these. You have {{ codes|length }} codes.</p>
        <div class="rf-form-actions">
            <a class="button" href="{% url 'security-settings' %}">I've saved these - continue</a>
        </div>
    </section>
{% endblock %}