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

{% block title %}
  {% trans "Recovery Codes" %}
{% endblock title %}

{% block page.breadcrumbs %}
  {{ block.super }}
  <c-breadcrumbs.item href="{% url 'mfa_index' %}"
                      text="{% trans 'Two-Factor Authentication' %}" />
  <c-breadcrumbs.item text="{% trans 'Recovery Codes' %}" />
{% endblock page.breadcrumbs %}

{% block page.content %}
  <c-card title="{% trans 'Recovery Codes' %}">
    {% if can_view_codes %}
      <c-dac.form-field type="textarea"
                        id="recovery_codes"
                        readonly
                        rows="{{ unused_codes|length }}"
                        label="{% trans 'Unused codes' %}"
                        class="mb-3">
        {# djlint:off #}{% for code in unused_codes %}{% if forloop.counter0 %}
        {% endif %}{{ code }}{% endfor %}{# djlint:on #}
      </c-dac.form-field>
      {% if MFA_RECOVERY_CODES_SHOW_ONCE %}
        <div class="form-check mb-3">
          <input class="form-check-input"
                 type="checkbox"
                 id="codes_saved" />
          <label class="form-check-label" for="codes_saved">{% trans "I have saved my recovery codes." %}</label>
        </div>
      {% endif %}
      {% if can_download_codes %}
        <c-button href="{% url 'mfa_download_recovery_codes' %}"
                  variant="primary"
                  text="{% trans 'Download' %}" />
      {% endif %}
      {% if can_generate_codes %}
        <c-button href="{% url 'mfa_generate_recovery_codes' %}"
                  text="{% trans 'Generate New Codes' %}" />
      {% endif %}
    {% endif %}
  </c-card>
{% endblock page.content %}

{% block extra_js %}
  {{ block.super }}
  {% include "mfa/recovery_codes/snippets/scripts.html" %}
{% endblock extra_js %}