{% extends "layouts/dashboard.html" %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="opacity-60">Account</span>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'accounts:mfa_manage' %}" class="hover:text-ruforum-primary transition-colors">Two-factor</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">Add authenticator</span>
</nav>
{% endblock %}
{% block content %}
<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
  <div>
    <h1 class="font-display text-2xl font-bold text-ruforum-text">Add authenticator</h1>
    <p class="mt-1 text-sm text-ruforum-text-muted">Follow the two steps below to link your authenticator app.</p>
  </div>
  <a href="{% url 'accounts:mfa_manage' %}" class="btn-secondary shrink-0">
    <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="M15 19l-7-7 7-7"/></svg>
    Back to two-factor
  </a>
</div>
{% include "components/rims_page_intro.html" with eyebrow="Two-factor enrolment" heading="Pair this account with an authenticator app." description="Use Google Authenticator, 1Password, Authy, or any TOTP-compatible app. Scan the QR code or paste the manual key, then verify with a fresh 6-digit code to activate." %}

<div class="max-w-lg space-y-4">

  {# ── Step 1 ── #}
  <div class="card overflow-hidden">
    <div class="flex items-center gap-3 border-b border-ruforum-border px-6 py-3">
      <span class="font-meta text-xs font-semibold uppercase tracking-widest text-ruforum-text-muted">Step 1</span>
      <span class="text-sm font-medium text-ruforum-text">Scan the QR code</span>
    </div>
    <div class="p-6 space-y-5">
      <div class="flex justify-center rounded-lg bg-ruforum-surface p-5">
        <img src="{{ qr_data_uri }}" width="192" height="192" alt="QR code for authenticator setup" class="h-48 w-48" />
      </div>
      <div class="rounded-lg border border-ruforum-border bg-ruforum-surface px-4 py-3">
        <p class="mb-1.5 font-meta text-xs font-semibold uppercase tracking-widest text-ruforum-text-muted">Manual entry key</p>
        <p class="break-all font-mono text-sm text-ruforum-text leading-relaxed">{{ secret_key }}</p>
        <p class="mt-2 text-xs text-ruforum-text-muted">Choose "Enter setup key" in your app and enter the key above (type: time-based).</p>
      </div>
      <p class="text-xs text-ruforum-text-muted">
        Need a new code? <a href="{% url 'accounts:mfa_enroll' %}?restart=1" class="font-medium text-ruforum-primary hover:underline">Generate a new secret</a> — this invalidates the current key until setup is complete.
      </p>
    </div>
  </div>

  {# ── Step 2 ── #}
  <div class="card overflow-hidden">
    <div class="flex items-center gap-3 border-b border-ruforum-border px-6 py-3">
      <span class="font-meta text-xs font-semibold uppercase tracking-widest text-ruforum-text-muted">Step 2</span>
      <span class="text-sm font-medium text-ruforum-text">Verify the 6-digit code</span>
    </div>
    <form method="post" class="p-6 space-y-4">
      {% csrf_token %}
      {% if form.non_field_errors %}
      <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ form.non_field_errors }}</div>
      {% endif %}
      <div>
        <label for="{{ form.device_name.id_for_label }}" class="field-label">{{ form.device_name.label }}</label>
        {{ form.device_name }}
        {% if form.device_name.errors %}<p class="field-error">{{ form.device_name.errors.0 }}</p>{% endif %}
      </div>
      <div>
        <label for="{{ form.code.id_for_label }}" class="field-label">{{ form.code.label }}</label>
        {{ form.code }}
        <p class="field-hint">Open your authenticator app and enter the current 6-digit code.</p>
        {% if form.code.errors %}<p class="field-error">{{ form.code.errors.0 }}</p>{% endif %}
      </div>
      <div class="flex flex-wrap gap-3 pt-1">
        <button type="submit" class="btn-primary">Verify and enable</button>
        <a href="{% url 'accounts:mfa_manage' %}" class="btn-secondary">Cancel</a>
      </div>
    </form>
  </div>

</div>
{% endblock %}