{% extends "mfa/recovery_codes/base.html" %}
{% load i18n allauth static %}

{% comment %}
    Overridden for layout: Download and Generate sit side by side under the codes rather
    than stacking. Generate is outline-only — it silently invalidates the codes on screen,
    so it must not be the button your eye lands on.
{% endcomment %}

{% block content %}
    {% element h1 %}
        {% translate "Recovery Codes" %}
    {% endelement %}
    {% element p %}
        {% blocktranslate count unused_count=unused_codes|length %}There is {{ unused_count }} out of {{ total_count }} recovery codes available.{% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes available.{% endblocktranslate %}
    {% endelement %}

    {% if can_view_codes %}
        {% element field id="recovery_codes" type="textarea" rows=unused_codes|length readonly=True %}
            {% slot label %}
                {% translate "Unused codes" %}
            {% endslot %}
            {# djlint:off #}
{% slot value %}{% for code in unused_codes %}{% if forloop.counter0 %}
{% endif %}{{ code }}{% endfor %}{% endslot %}
            {# djlint:on #}
        {% endelement %}
    {% endif %}

    <div class="mt-6 flex flex-wrap items-center gap-2">
        {% if can_download_codes %}
            {% url 'mfa_download_recovery_codes' as download_url %}
            {% element button href=download_url icon="download" %}
                {% translate "Download codes" %}
            {% endelement %}
        {% endif %}
        {% if can_generate_codes %}
            {% url 'mfa_generate_recovery_codes' as generate_url %}
            {% element button href=generate_url icon="refresh-cw" tags="outline" %}
                {% translate "Generate new codes" %}
            {% endelement %}
        {% endif %}
    </div>

    {% if MFA_RECOVERY_CODES_SHOW_ONCE and can_view_codes %}
        {% element field type="checkbox" id="codes_saved" %}
            {% slot label %}
                {% translate "I have saved my recovery codes" %}
            {% endslot %}
        {% endelement %}
    {% endif %}
{% endblock content %}

{% block extra_body %}
    {{ block.super }}
    <script src="{% static 'mfa/js/recovery_codes.js' %}"></script>
    <script src="{% static 'account/js/onload.js' %}"></script>
    <script data-allauth-onload="allauth.recoveryCodes.forms.viewForm" type="application/json">{
    "ids": {
        "saveConfirmation": "codes_saved",
        "recoveryCodes": "recovery_codes"
    }
}
    </script>
{% endblock extra_body %}
