{% extends "layouts/auth.html" %}
{% block title %}Verify — IILMP{% endblock %}
{% block content %}

<div class="mb-7">
  <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-ruforum-primary/10 text-ruforum-primary">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
    </svg>
  </div>
  <h1 class="font-display text-xl font-bold text-ruforum-text">Two-step verification</h1>
  <p class="mt-1 text-xs leading-relaxed text-ruforum-text-muted">
    Open your authenticator app and enter the 6-digit code shown for IILMP.
  </p>
</div>

<form method="post" class="space-y-4" novalidate>
  {% csrf_token %}
  {% if form.non_field_errors %}
    <div class="flex items-start gap-2.5 rounded-lg border border-red-200 bg-red-50 px-3.5 py-3 text-xs text-red-700" role="alert">
      <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      <span>{{ form.non_field_errors }}</span>
    </div>
  {% endif %}
  {% for field in form %}
    {% include "components/forms/field.html" with field=field %}
  {% endfor %}
  <div class="pt-1">
    <button type="submit" class="btn-primary w-full justify-center">
      Verify
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
      </svg>
    </button>
  </div>
</form>

<div class="mt-6 border-t border-ruforum-border pt-5 text-center text-xs text-ruforum-text-muted">
  <p>Lost access to your authenticator? Contact your secretariat administrator to recover your account.</p>
</div>

{% endblock %}