{{define "mfa_setup"}}
  {{template "base" .}}
{{end}}

{{define "mfa_setup_content"}}
<div class="max-w-lg mx-auto p-6">
  <h1 class="text-2xl font-bold text-white mb-2">Set up Multi‑Factor Authentication</h1>
  <p class="text-gray-400 mb-6">Scan the QR code below with your authenticator app (Google Authenticator, Authy, 1Password, etc.), or enter the secret manually, then enter a code to confirm.</p>

  <div class="bg-slate-800 border border-slate-700 rounded p-4 mb-4">
    <div class="flex items-start gap-4">
      <img alt="QR Code" class="bg-white rounded p-2" src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data={{urlquery .OTPAuthURI}}" width="180" height="180"/>
      <div class="flex-1">
        <div class="text-sm text-gray-400">Secret</div>
        <div class="font-mono text-lg text-white break-all">{{.Secret}}</div>
        <div class="text-sm text-gray-400 mt-2">URI</div>
        <div class="text-xs text-gray-300 break-all">{{.OTPAuthURI}}</div>
      </div>
    </div>
  </div>

  <form id="mfa-verify-form" class="space-y-4">
    <div>
      <label for="code" class="block text-sm font-medium text-gray-300 mb-2">Enter 6‑digit code</label>
      <input id="code" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" class="form-input" placeholder="123456" required />
    </div>
    <div class="flex justify-end">
      <button type="submit" class="btn-primary"><i class="fas fa-check mr-2"></i>Verify and Enable</button>
    </div>
  </form>
</div>
{{end}}

{{define "mfa_setup_scripts"}}
<script>
  function getCSRF() {
    const m = document.cookie.match(/(?:^|; )csrf_token=([^;]+)/);
    return m && m[1] ? decodeURIComponent(m[1]) : '';
  }
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('mfa-verify-form');
    if (!form) return;
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const fd = new FormData(form);
      const params = new URLSearchParams(Array.from(fd.entries()));
      try {
        const res = await fetch('/editor/profile/mfa/verify', { method: 'POST', headers: { 'X-CSRF-Token': getCSRF() }, body: params });
        const data = await res.json().catch(() => ({}));
        if (res.ok && data.success) {
          showNotification('MFA enabled', 'success');
          window.location.href = '/editor/profile';
        } else {
          throw new Error(data.error || res.statusText);
        }
      } catch (e) {
        showNotification('Verification failed: ' + e.message, 'error');
      }
    });
  });
</script>
{{end}}