@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 %}

<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>
    <p style="font-size:.875rem;color:#aaa;margin-bottom:.75rem;">
        You have <strong style="color:#e5e7eb;">{{ recovery_code_count }}</strong> recovery code{{ 's' if recovery_code_count != 1 else '' }} remaining.
        Recovery codes are only shown once when generated.
    </p>
    <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>

<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