{% extends "base.html" %}
{% from "macros.html" import icon, btn, badge %}
{% block title %}{{ t('Backup Codes') }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ icon('shield-check', 24) }} {{ t('2FA Backup Codes') }}</h1>
    <p class="page-subtitle">{{ t('Save these codes in a secure place - they will only be shown once') }}</p>
  </div>
</div>

<div class="dashboard-grid">
  <div class="card" style="overflow:hidden">
    <div style="padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border)">
      <div style="display:flex;align-items:center;gap:10px;font-size:0.875rem;font-weight:600;color:var(--fg-2)">
        {{ icon('alert-triangle', 18) }}
        <span>{{ t('IMPORTANT: These codes will not be shown again') }}</span>
      </div>
    </div>
    <div style="padding:32px">
      <p style="font-size:0.875rem;color:var(--fg-2);margin-bottom:24px;line-height:1.6">
        {{ t('Each backup code can be used once if you lose access to your authenticator app. Store them securely.') }}
      </p>

      <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:24px">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--brand)">
          {% for code in codes %}
            <div style="background:var(--surface);padding:12px;border-radius:var(--r-sm);text-align:center;letter-spacing:0.1em">
              {{ code }}
            </div>
          {% endfor %}
        </div>
      </div>

      <div style="display:flex;gap:12px;flex-wrap:wrap">
        <button type="button" onclick="copyBackupCodes()" class="btn btn-default btn-sm">
          {{ icon('copy', 14) }} {{ t('Copy All') }}
        </button>
        <button type="button" onclick="downloadBackupCodes()" class="btn btn-default btn-sm">
          {{ icon('download', 14) }} {{ t('Download as Text') }}
        </button>
      </div>
    </div>
    <form method="post" class="form-footer" data-disable data-indicator="#top-loader">
      {{ request.csrf_input() }}
      <div class="form-footer-left">
        <button type="submit" class="btn btn-primary" style="width:100%">
          {{ icon('check', 14) }} {{ t('I have saved my codes') }}
        </button>
      </div>
    </form>
  </div>

  <div class="card">
    <div class="card-header">
      {{ icon('info', 18) }} {{ t('How to use backup codes') }}
    </div>
    <div class="card-body">
      <ul style="font-size:0.875rem;color:var(--fg-2);line-height:1.8;padding-left:20px;margin:0">
        <li>{{ t('If you lose your phone or authenticator app, use a backup code to login') }}</li>
        <li>{{ t('Enter the code in the 2FA verification field instead of the TOTP code') }}</li>
        <li>{{ t('Each code can only be used once') }}</li>
        <li>{{ t('You can regenerate new codes from your profile settings') }}</li>
      </ul>
    </div>
  </div>
</div>

<script>
const backupCodes = {{ codes | tojson }};

function copyBackupCodes() {
  const text = backupCodes.join('\n');
  navigator.clipboard.writeText(text).then(() => {
    alert('{{ t("Backup codes copied to clipboard") }}');
  });
}

function downloadBackupCodes() {
  const text = `ASOK 2FA Backup Codes\nGenerated: ${new Date().toLocaleString()}\n\n${backupCodes.join('\n')}\n\nKeep these codes secure. Each can only be used once.`;
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'asok-backup-codes.txt';
  a.click();
  URL.revokeObjectURL(url);
}
</script>
{% endblock %}