{% extends "mfa/recovery_codes/base.html" %}
{% load i18n allauth %}
{% 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 %}
    {% element field id="recovery_codes" type="textarea" disabled=True rows=unused_codes|length readonly=True monospace=True %}
        {% slot label %}
            {% translate "Unused codes" %}
        {% endslot %}
        {% comment %} djlint:off {% endcomment %}
        {% slot value %}{% for code in unused_codes %}{% if forloop.counter0 %}
{% endif %}{{ code }}{% endfor %}{% endslot %}
        {% comment %} djlint:on {% endcomment %}
    {% endelement %}
    <div class="p-3 btn-group">
        {% if unused_codes %}
            {% url 'mfa_download_recovery_codes' as download_url %}
            {% element button href=download_url %}
                {% translate "Download codes" %}
            {% endelement %}
        {% endif %}
        {% url 'mfa_generate_recovery_codes' as generate_url %}
        {% element button href=generate_url %}
            {% translate "Generate new codes" %}
        {% endelement %}
    </div>
{% endblock content %}
