{% extends "base.html" %}
{% load i18n %}

{% block head_title %}Security Settings{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto py-12 px-4 space-y-8">

  <div>
    <h1 class="text-2xl font-bold text-slate-900 mb-1">Security Settings</h1>
    <p class="text-slate-500">Manage your passkeys, authenticator apps, and recovery codes.</p>
  </div>

  <!-- ===== Passkeys / WebAuthn ===== -->
  {% if "webauthn" in MFA_SUPPORTED_TYPES %}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
      <div class="px-6 py-5 border-b border-slate-100 bg-slate-50 flex items-center gap-3">
        <div class="flex-shrink-0 inline-flex items-center justify-center h-9 w-9 rounded-xl bg-indigo-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
          </svg>
        </div>
        <div>
          <h2 class="text-sm font-semibold text-slate-900">Passkeys &amp; Security Keys</h2>
          <p class="text-xs text-slate-500">Sign in with biometrics or a hardware key — no password needed.</p>
        </div>
      </div>
      <div class="px-6 py-5">
        {% with webauthn_list=authenticators.webauthn %}
          {% if webauthn_list %}
            <p class="text-sm text-slate-600 mb-4">
              You have
              <strong>{{ webauthn_list|length }}</strong>
              security key{{ webauthn_list|length|pluralize }} registered.
            </p>
            <div class="flex flex-wrap gap-3">
              <a href="{% url 'mfa_list_webauthn' %}"
                 class="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
                Manage Passkeys
              </a>
              <a href="{% url 'mfa_add_webauthn' %}"
                 class="bg-white hover:bg-slate-50 text-slate-700 text-sm font-medium px-4 py-2 rounded-lg border border-slate-300 transition-colors">
                Add Another
              </a>
            </div>
          {% else %}
            <div class="flex items-start gap-4">
              <div class="flex-1">
                <p class="text-sm text-slate-600 mb-1">No passkeys registered yet.</p>
                <p class="text-xs text-slate-400">Add a passkey to sign in with Face ID, Touch ID, or a hardware security key.</p>
              </div>
            </div>
            <div class="mt-4">
              <a href="{% url 'mfa_add_webauthn' %}"
                 class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                </svg>
                Add a Passkey
              </a>
            </div>
          {% endif %}
        {% endwith %}
      </div>
    </div>
  {% endif %}

  <!-- ===== TOTP Authenticator App ===== -->
  {% if "totp" in MFA_SUPPORTED_TYPES %}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
      <div class="px-6 py-5 border-b border-slate-100 bg-slate-50 flex items-center gap-3">
        <div class="flex-shrink-0 inline-flex items-center justify-center h-9 w-9 rounded-xl bg-purple-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
        </div>
        <div>
          <h2 class="text-sm font-semibold text-slate-900">Authenticator App (TOTP)</h2>
          <p class="text-xs text-slate-500">Use apps like Google Authenticator, Authy, or 1Password.</p>
        </div>
      </div>
      <div class="px-6 py-5">
        {% if authenticators.totp %}
          <p class="text-sm text-slate-600 mb-4">
            <span class="inline-flex items-center gap-1.5 text-green-700 font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
              Active
            </span>
            — An authenticator app is protecting your account.
          </p>
          <a href="{% url 'mfa_deactivate_totp' %}"
             class="inline-flex items-center gap-2 bg-white hover:bg-red-50 text-red-600 text-sm font-medium px-4 py-2 rounded-lg border border-red-200 transition-colors">
            Deactivate
          </a>
        {% else %}
          <p class="text-sm text-slate-600 mb-4">No authenticator app configured.</p>
          <a href="{% url 'mfa_activate_totp' %}"
             class="inline-flex items-center gap-2 bg-purple-600 hover:bg-purple-500 text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
            </svg>
            Set Up Authenticator App
          </a>
        {% endif %}
      </div>
    </div>
  {% endif %}

  <!-- ===== Recovery Codes ===== -->
  {% if "recovery_codes" in MFA_SUPPORTED_TYPES %}
    {% with total_count=authenticators.recovery_codes.generate_codes|length unused_count=authenticators.recovery_codes.get_unused_codes|length %}
      <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-5 border-b border-slate-100 bg-slate-50 flex items-center gap-3">
          <div class="flex-shrink-0 inline-flex items-center justify-center h-9 w-9 rounded-xl bg-slate-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
          </div>
          <div>
            <h2 class="text-sm font-semibold text-slate-900">Recovery Codes</h2>
            <p class="text-xs text-slate-500">Backup codes you can use if you lose access to your other 2FA methods.</p>
          </div>
        </div>
        <div class="px-6 py-5">
          {% if authenticators.recovery_codes %}
            <p class="text-sm text-slate-600 mb-4">
              {% if unused_count > 0 %}
                <strong>{{ unused_count }}</strong> of <strong>{{ total_count }}</strong> codes remaining.
              {% else %}
                <span class="text-red-600 font-medium">All recovery codes have been used.</span>
                Generate new ones below.
              {% endif %}
            </p>
            <div class="flex flex-wrap gap-3">
              {% if unused_count > 0 and not MFA_RECOVERY_CODES_SHOW_ONCE %}
                <a href="{% url 'mfa_view_recovery_codes' %}"
                   class="bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
                  View Codes
                </a>
                <a href="{% url 'mfa_download_recovery_codes' %}"
                   class="bg-white hover:bg-slate-50 text-slate-700 text-sm font-medium px-4 py-2 rounded-lg border border-slate-300 transition-colors">
                  Download
                </a>
              {% endif %}
              <a href="{% url 'mfa_generate_recovery_codes' %}"
                 class="bg-white hover:bg-slate-50 text-slate-700 text-sm font-medium px-4 py-2 rounded-lg border border-slate-300 transition-colors">
                Regenerate
              </a>
            </div>
          {% else %}
            <p class="text-sm text-slate-500 mb-4">
              {% if is_mfa_enabled %}
                No recovery codes generated. Generate some now so you don't get locked out.
              {% else %}
                Recovery codes become available once you have at least one 2FA method enabled.
              {% endif %}
            </p>
            {% if is_mfa_enabled %}
              <a href="{% url 'mfa_generate_recovery_codes' %}"
                 class="inline-flex items-center gap-2 bg-slate-700 hover:bg-slate-600 text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors">
                Generate Recovery Codes
              </a>
            {% endif %}
          {% endif %}
        </div>
      </div>
    {% endwith %}
  {% endif %}

</div>
{% endblock %}