{% 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>
  <a href="{% url 'accounts:profile' %}" class="hover:text-ruforum-primary transition-colors">Account</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">Two-factor authentication</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">Two-factor authentication</h1>
    <p class="mt-1 text-sm text-ruforum-text-muted">Use an authenticator app (TOTP) for an extra verification step at sign-in.</p>
  </div>
  <a href="{% url 'accounts:mfa_enroll' %}" class="btn-primary 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="M12 4v16m8-8H4"/></svg>
    Add authenticator
  </a>
</div>
{% include "components/rims_page_intro.html" with eyebrow="Account security" heading="Add a second factor that travels with you." description="Authenticator apps generate a fresh 6-digit code every 30 seconds and work without a network connection. Even if your password leaks, sign-in still requires the live code from your device." %}

<div class="max-w-2xl space-y-6">

  <div class="card overflow-hidden">
    <div class="border-b border-ruforum-border px-6 py-3">
      <p class="form-section-label">Authenticator apps</p>
      <p class="mt-0.5 text-xs text-ruforum-text-muted">Compatible with Google Authenticator, 1Password, Authy, and any TOTP app.</p>
    </div>

    {% if devices %}
    <ul class="divide-y divide-ruforum-border">
      {% for d in devices %}
      <li class="px-6 py-5">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div class="flex items-start gap-3">
            <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ruforum-surface">
              <svg class="h-4 w-4 text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3.75h3m-3 3.75h3"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-ruforum-text">{{ d.name|default:"Authenticator" }}</p>
              <p class="mt-0.5 text-xs text-ruforum-text-muted">Added {{ d.created_at|date:"M j, Y" }}</p>
              <span class="badge-green mt-1.5">Active</span>
            </div>
          </div>
          <form method="post" action="{% url 'accounts:mfa_remove' d.pk %}" class="flex flex-wrap items-end gap-2">
            {% csrf_token %}
            <div>
              <label class="field-label text-xs" for="remove-pw-{{ d.pk }}">Confirm password to remove</label>
              <input type="password" name="password" id="remove-pw-{{ d.pk }}" autocomplete="current-password" required placeholder="Your password" />
            </div>
            <button type="submit" class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-white px-3 py-2.5 text-sm font-medium text-red-700 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-1">
              Remove
            </button>
          </form>
        </div>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <div class="px-6 py-12 text-center">
      <div class="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-ruforum-surface">
        <svg class="h-5 w-5 text-ruforum-text-muted" 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>
      <p class="text-sm font-medium text-ruforum-text">No authenticator yet</p>
      <p class="mt-1 text-xs text-ruforum-text-muted">Add an authenticator app to protect your account with a second factor at sign-in.</p>
    </div>
    {% endif %}
  </div>

  <p class="text-xs text-ruforum-text-muted">
    <a href="{% url 'accounts:profile' %}" class="font-medium text-ruforum-primary hover:underline">← Back to profile</a>
  </p>

</div>
{% endblock %}