{% extends "account/base.html" %}
{% load i18n %}

{% block pagetitle %}{% trans "Recovery codes" %}{% endblock %}


{% block content %}
  <div class="resource-form-shell account-profile-editor account-recovery-codes">
    <form
      method="post"
      action="{% url 'mfa_view_recovery_codes' %}"
      class="resource-edit-form account-recovery-form"
    >
      {% csrf_token %}

      <section class="resource-form-card account-recovery-card" aria-labelledby="recovery-codes-heading">
        <div class="resource-form-section-heading">
          <span class="resource-form-section-icon account-mfa-card-icon" aria-hidden="true">
            <i class="fas fa-key"></i>
          </span>
          <div>
            <h1 id="recovery-codes-heading">{% trans "Recovery codes" %}</h1>
            <p>
              {% trans "Use a recovery code when you cannot access your usual multi-factor authentication method." %}
            </p>
          </div>
        </div>

        <div class="account-recovery-overview">
          <div>
            <span class="account-recovery-eyebrow">{% trans "Emergency sign-in access" %}</span>
            <h2>{% trans "Keep your remaining codes somewhere secure" %}</h2>
          </div>
          <div
            class="account-recovery-count"
            aria-label="{% blocktranslate with unused=unused_codes|length total=total_count %}{{ unused }} of {{ total }} recovery codes remain{% endblocktranslate %}"
          >
            <strong>{{ unused_codes|length }}</strong>
            <span>{% blocktranslate with total=total_count %}of {{ total }} remaining{% endblocktranslate %}</span>
          </div>
        </div>

        {% if unused_codes %}
          {% if reveal_tokens and can_view_codes %}
            <div class="account-recovery-guidance" role="note">
              <i class="fas fa-lock" aria-hidden="true"></i>
              <div>
                <strong>{% trans "Store these outside Ghostwriter" %}</strong>
                <p>{% trans "Save them in a password manager or another secure location. Each code works once." %}</p>
              </div>
            </div>

            <ol id="token-table" class="account-recovery-code-grid" aria-label="{% trans 'Unused recovery codes' %}">
              {% for code in unused_codes %}
                <li class="account-recovery-code">
                  <span class="account-recovery-code-index" aria-hidden="true">
                    {{ forloop.counter|stringformat:"02d" }}
                  </span>
                  <code>{{ code }}</code>
                </li>
              {% endfor %}
            </ol>
          {% else %}
            <div class="account-recovery-locked" role="status">
              <span class="account-recovery-state-icon" aria-hidden="true"><i class="fas fa-eye-slash"></i></span>
              <div>
                <h2>{% trans "Recovery codes are hidden" %}</h2>
                {% if not reveal_tokens %}
                  <p>
                    {% trans "Your administrator has disabled displaying recovery codes here. Download them or replace the set if you no longer have a securely stored copy." %}
                  </p>
                {% else %}
                  <p>
                    {% trans "This set cannot be displayed again. Replace it if you no longer have a securely stored copy." %}
                  </p>
                {% endif %}
              </div>
            </div>
          {% endif %}
        {% else %}
          <div class="account-recovery-empty" role="status">
            <span class="account-recovery-state-icon" aria-hidden="true">
              <i class="fas fa-exclamation-circle"></i>
            </span>
            <div>
              <h2>{% trans "No recovery codes remain" %}</h2>
              <p>{% trans "Generate a new set now so you have another way to complete sign-in." %}</p>
            </div>
          </div>
        {% endif %}
      </section>

      <div class="resource-form-actions account-recovery-actions">
        <div class="resource-form-actions-context">
          {% if can_generate_codes and unused_codes %}
            {% trans "Generating a new set invalidates every code in this set." %}
          {% elif can_generate_codes %}
            {% trans "Create a new set before you need emergency access." %}
          {% else %}
            {% trans "Store this set securely before leaving this page." %}
          {% endif %}
        </div>
        <div class="resource-form-actions-buttons">
          <a class="btn btn-outline-secondary" href="{% url 'mfa_index' %}">{% trans "Back to MFA settings" %}</a>
          {% if can_download_codes %}
            <a class="btn btn-outline-secondary" href="{% url 'mfa_download_recovery_codes' %}">
              <i class="fas fa-download" aria-hidden="true"></i> {% trans "Download codes" %}
            </a>
          {% endif %}
          {% if can_generate_codes %}
            <button
              class="btn btn-primary"
              type="submit"
              {% if unused_codes %}
                data-confirm-replacement="{% trans 'Replace the current recovery codes? Every existing code will stop working.' %}"
              {% endif %}
            >
              <i class="fas fa-sync-alt" aria-hidden="true"></i>
              {% if unused_codes %}{% trans "Replace codes" %}{% else %}{% trans "Generate codes" %}{% endif %}
            </button>
          {% endif %}
        </div>
      </div>
    </form>
  </div>

{% endblock %}

{% block morescripts %}
  {{ block.super }}
  <script>
    (function () {
      const replacementButton = document.querySelector('[data-confirm-replacement]')
      if (!replacementButton) {
        return
      }

      const recoveryForm = replacementButton.closest('form')
      recoveryForm.addEventListener('submit', function (event) {
        if (!window.confirm(replacementButton.dataset.confirmReplacement)) {
          event.preventDefault()
        }
      })
    })()
  </script>
{% endblock %}