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

<!---->
{% block content %}
<div class="container-prose">
  <h1>{% trans "Recovery Codes" %}</h1>

  <p>
    {% blocktrans count unused_count=unused_codes|length trimmed %}
    There is {{ unused_count }} out of {{ total_count }} recovery codes available.
    {% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes
    available.{% endblocktrans %}
  </p>

  <fieldset class="fieldset border border-base-300 rounded-box p-4">
    <legend class="fieldset-legend">{% trans "Unused codes" %}</legend>

    <label class="label">
      <span class="sr-only">{% trans "Unused codes" %}</span>

      <textarea
        disabled
        readonly
        type="radio"
        id="recovery_codes"
        class="textarea textarea-sm textarea-primary lg:textarea-md"
      >
{% for code in unused_codes %}{% if forloop.counter0 %}{% endif %}{{ code }}{% endfor %}</textarea
      >
    </label>
  </fieldset>

  {% if unused_codes %}
  <a
    href="{% url 'mfa_download_recovery_codes' %}"
    class="btn btn-sm btn-primary lg:btn-md 2xl:btn-lg"
  >
    <i data-lucide="download" class="size-4 lg:size-6"></i>
    {% trans "Download codes" %}
  </a>
  {% endif %}

  <a
    href="{% url 'mfa_generate_recovery_codes' %}"
    class="btn btn-sm btn-success lg:btn-md 2xl:btn-lg"
  >
    <i data-lucide="qr-code" class="size-4 lg:size-6"></i>
    {% trans "Generate new codes" %}
  </a>
</div>
{% endblock %}