@extends('auth.layout')

@section('content')
<h1>Two-Factor Authentication</h1>
<p style="font-size:.875rem;color:#aaa;margin-bottom:1.25rem;">
    {% if enabled %}
    Status: <strong style="color:#4ade80;">Enabled</strong>
    {% else %}
    Status: <strong style="color:#f87171;">Disabled</strong>
    {% endif %}
</p>

{% if flash.get("success") %}
<div class="alert-success">{{ flash.get("success") }}</div>
{% endif %}

{% if flash.get("error") %}
<div class="alert-error">{{ flash.get("error") }}</div>
{% endif %}

{% if enabled %}

{% if recovery_codes %}
<div style="margin-bottom:1.5rem;">
    <p style="font-size:.8rem;font-weight:500;color:#aaa;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.75rem;">Recovery Codes</p>
    <div style="background:#0f0f0f;border:1px solid #2e2e2e;border-radius:8px;padding:1rem;margin-bottom:.75rem;">
        <ul style="list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;">
            {% for code in recovery_codes %}
            <li style="font-family:monospace;font-size:.8rem;color:#aaa;">{{ code }}</li>
            {% endfor %}
        </ul>
    </div>
    <form method="POST" action="/two-factor/regenerate">
        <input type="hidden" name="_token" value="{{ csrf_token }}">
        <div class="field">
            <input name="password" type="password" required placeholder="Confirm password to regenerate" autocomplete="current-password">
        </div>
        <button type="submit" class="btn-submit" style="background:#374151;">Regenerate Recovery Codes</button>
    </form>
</div>
{% endif %}

<hr style="border:none;border-top:1px solid #2a2a3e;margin-bottom:1.5rem;">

<p style="font-size:.8rem;font-weight:500;color:#aaa;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.75rem;">Disable Two-Factor Authentication</p>
<form method="POST" action="/two-factor/destroy">
    <input type="hidden" name="_token" value="{{ csrf_token }}">
    <div class="field">
        <input name="password" type="password" required placeholder="Confirm password" autocomplete="current-password">
    </div>
    <button type="submit" class="btn-submit" style="background:#dc2626;">Disable Two-Factor Authentication</button>
</form>

{% else %}

<a href="/two-factor/setup" class="btn-submit" style="display:block;text-align:center;text-decoration:none;">Enable Two-Factor Authentication</a>

{% endif %}
@endsection