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

{{define "mfa_content"}}
<div class="max-w-md mx-auto p-6">
  <h1 class="text-2xl font-bold text-white mb-2">Multi‑Factor Authentication</h1>
  <p class="text-gray-400 mb-6">Enter the 6‑digit code from your authenticator app.</p>

  {{if .error}}
    <div class="mb-4 p-3 rounded bg-red-700 text-white">{{.error}}</div>
  {{end}}

  <form id="mfa-form" class="space-y-4" method="POST" action="{{url "/editor/mfa"}}">
    <input type="hidden" name="csrf_token" value="{{.csrf_token}}" />
    <div>
      <label for="code" class="block text-sm font-medium text-gray-300 mb-2">Authentication 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-right-to-bracket mr-2"></i>Verify</button>
    </div>
  </form>
</div>
{{end}}

{{define "mfa_scripts"}}
<script>
  // Optional: autofocus the code field
  document.addEventListener('DOMContentLoaded', () => {
    const code = document.getElementById('code');
    if (code) code.focus();
  });
</script>
{{end}}