{% extends "base.html" %}
{% block title %}Enable MFA // Synapse-Cortex{% endblock %}
{% block header %}Settings // Enable MFA{% endblock %}
{% block content %}
<div class="max-w-md border border-cortex-border bg-cortex-panel rounded-md p-6">
  <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Scan with your authenticator app</div>

  {% if error %}
  <div class="mb-4 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded">{{ error }}</div>
  {% endif %}

  <div class="flex justify-center bg-white rounded p-3 mb-4">
    <img src="{{ qr_data_url }}" alt="MFA QR code" class="w-44 h-44" />
  </div>

  <div class="text-[10px] text-cortex-muted uppercase tracking-wider mb-1">Can't scan? Enter manually</div>
  <div class="font-mono text-sm text-chrome bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 mb-4 break-all">{{ secret }}</div>

  <form method="post" action="/settings/mfa/enroll" class="space-y-3 text-sm">
    <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Enter the 6-digit code to confirm</label>
    <input required name="code" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="6" autofocus
           placeholder="000000"
           class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-3 text-center text-2xl font-mono tracking-[0.5em] focus:outline-none focus:border-accent-blue" />
    <button type="submit" class="w-full bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs py-2.5 rounded hover:bg-accent-blue-bright transition">
      Confirm &amp; Enable
    </button>
  </form>
  <a href="/settings" class="block text-center text-[10px] text-cortex-muted hover:text-accent-red mt-4 uppercase">Cancel</a>
</div>
{% endblock %}