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

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
        Save Your Recovery Codes
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        Store these codes somewhere safe. Each code can only be used once.
      </p>
    </div>

    <div class="bg-gray-100 rounded-lg p-6">
      <ul class="grid grid-cols-2 gap-2">
        {% for code in recovery_codes %}
        <li class="font-mono text-sm text-gray-800 bg-white rounded px-3 py-2 border border-gray-200">
          {{ code }}
        </li>
        {% endfor %}
      </ul>
    </div>

    <div class="flex justify-center">
      <a href="/two-factor/manage"
        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">
        I have saved my recovery codes
      </a>
    </div>
  </div>
</div>
{% endblock %}