{% extends "base.html" %}
{% block title %}Verify // Synapse-Cortex{% endblock %}
{% block bare_content %}
<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <div class="text-center mb-6">
      <img src="/static/img/cortex-logo.webp" alt="Synapse-Cortex" class="h-20 w-auto mx-auto mb-3" />
      <div class="text-[10px] text-cortex-muted mt-1 tracking-widest font-display">TWO-FACTOR VERIFICATION</div>
    </div>
    <div class="border border-cortex-border bg-cortex-panel rounded-md p-6 glow-blue">
      {% 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 %}
      <p class="text-xs text-cortex-muted mb-4">Enter the 6-digit code from your authenticator app.</p>
      <form method="post" action="/login/mfa" class="space-y-4 text-sm">
        <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 focus:ring-1 focus:ring-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">
          Verify
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}