{# _auth_main_mfa_recovery.html — MFA recovery codes display column.
   Renders <main class="wf-auth-form"> standalone for HTMX fragment responses.

   Expected context:
     recovery_codes, app_name, is_production
#}
{% import "_partials/_auth_macros.html" as auth %}
<main class="wf-auth-form">
  <div class="wf-auth-top">
    {{ auth.kicker(app_name, "Recovery codes") }}
  </div>

  <div class="wf-auth-wrap">
    <h1>Save recovery codes</h1>
    <p class="wf-auth-sub">Save these codes somewhere safe.</p>

    <div class="wf-alert warn wf-mt-5" role="alert">
      <div class="wf-alert-bar"></div>
      Save these recovery codes in a secure location. Each code can only be used once.
      If you lose access to your authenticator app, you can use a recovery code to sign in.
    </div>

    <div class="wf-framed wf-mt-5">
      <div class="wf-grid cols-2 wf-gap-2">
        {% for code in recovery_codes %}
          <code data-testid="recovery-code" class="wf-kbd wf-w-full">{{ code }}</code>
        {% endfor %}
      </div>
    </div>

    <p class="wf-mt-4">
      <a class="wf-btn primary" href="/settings">Back to settings →</a>
    </p>
  </div>
</main>