@extends('auth.layout')

@section('content')
<h1>Save Your Recovery Codes</h1>
<p style="font-size:.875rem;color:#aaa;margin-bottom:1.25rem;">Store these codes somewhere safe. Each code can only be used once.</p>

<div style="background:#0f0f0f;border:1px solid #2e2e2e;border-radius:8px;padding:1rem;margin-bottom:1.25rem;">
    <ul style="list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;">
        {% for code in recovery_codes %}
        <li style="font-family:monospace;font-size:.875rem;color:#e5e5e5;background:#1a1a2e;padding:.4rem .75rem;border-radius:4px;border:1px solid #2a2a3e;">{{ code }}</li>
        {% endfor %}
    </ul>
</div>

<a href="/two-factor/manage" class="btn-submit" style="display:block;text-align:center;text-decoration:none;">I have saved my recovery codes</a>
@endsection