{% extends "layouts/app.html" %}

{% block content %}
<div class="max-w-2xl mx-auto py-10 px-4 sm:px-6 lg:px-8 space-y-8">
  <div>
    <h2 class="text-2xl font-bold text-gray-900">Two-Factor Authentication</h2>
    <p class="mt-1 text-sm text-gray-500">
      {% if enabled %}
        Two-factor authentication is <span class="font-semibold text-green-600">enabled</span> on your account.
      {% else %}
        Two-factor authentication is <span class="font-semibold text-red-600">disabled</span>.
      {% endif %}
    </p>
  </div>

  {% if session_has("success") %}
  <div class="rounded-md bg-green-50 p-4">
    <p class="text-sm text-green-700">{{ session_get("success") }}</p>
  </div>
  {% endif %}

  {% if session_has("error") %}
  <div class="rounded-md bg-red-50 p-4">
    <p class="text-sm text-red-700">{{ session_get("error") }}</p>
  </div>
  {% endif %}

  {% if enabled %}
  <!-- Recovery codes section -->
  {% if recovery_codes %}
  <div class="bg-white shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium text-gray-900">Recovery Codes</h3>
      <p class="mt-1 text-sm text-gray-500">
        Store these codes safely. Each can only be used once if you lose your device.
      </p>
      <div class="mt-4 bg-gray-50 rounded-md p-4">
        <ul class="grid grid-cols-2 gap-2">
          {% for code in recovery_codes %}
          <li class="font-mono text-sm text-gray-700">{{ code }}</li>
          {% endfor %}
        </ul>
      </div>
      <form method="POST" action="/two-factor/regenerate" class="mt-4">
        {{ csrf_field() | raw }}
        <input name="password" type="password" required
          placeholder="Confirm password to regenerate"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
        <button type="submit"
          class="mt-3 inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
          Regenerate Recovery Codes
        </button>
      </form>
    </div>
  </div>
  {% endif %}

  <!-- Disable 2FA -->
  <div class="bg-white shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium text-gray-900">Disable Two-Factor Authentication</h3>
      <p class="mt-1 text-sm text-gray-500">
        This will remove the extra layer of security from your account.
      </p>
      <form method="POST" action="/two-factor" class="mt-4 space-y-3">
        {{ csrf_field() | raw }}
        <input type="hidden" name="_method" value="DELETE">
        <input name="password" type="password" required
          placeholder="Confirm password"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
        <button type="submit"
          class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700">
          Disable Two-Factor Authentication
        </button>
      </form>
    </div>
  </div>

  {% else %}
  <!-- Enable 2FA -->
  <div class="bg-white shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium text-gray-900">Enable Two-Factor Authentication</h3>
      <p class="mt-1 text-sm text-gray-500">
        Use an authenticator app like Google Authenticator or Authy to generate time-based codes.
      </p>
      <div class="mt-4">
        <a href="/two-factor/setup"
          class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
          Enable Two-Factor Authentication
        </a>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}