{{-- resources/views/auth/verify-email.blade.php --}}
<x-layouts.auth :title="'E-Mail verifizieren · ' . config('app.name', 'RD Inventory')">
    <div class="rounded-3xl bg-white shadow-sm border border-rk p-8">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 class="text-2xl font-semibold tracking-tight">E-Mail verifizieren</h2>
                <p class="mt-1 text-sm text-rk-slate">
                    Bitte bestätige deine E-Mail-Adresse über den Link, den wir dir gerade gesendet haben.
                    Falls nichts ankommt, kannst du die E-Mail erneut anfordern.
                </p>
            </div>
            <div class="h-11 w-11 rounded-2xl bg-rk-red/10 flex items-center justify-center">
                <svg class="h-5 w-5 text-rk-red" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <path d="M4 8l8 5 8-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M4 8v10h16V8" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
                    <path d="M4 8l8-5 8 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </div>
        </div>

        @if (session('status') === 'verification-link-sent')
            <div class="mt-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
                Ein neuer Bestätigungslink wurde an deine E-Mail-Adresse gesendet.
            </div>
        @endif

        <div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <form method="POST" action="{{ route('verification.send') }}" class="w-full sm:w-auto">
                @csrf
                <button type="submit"
                    class="w-full sm:w-auto rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-rk-red-dark focus:outline-none focus:ring-2 ring-rk focus:ring-offset-2">
                    Bestätigungslink erneut senden
                </button>
            </form>

            <form method="POST" action="{{ route('logout') }}" class="w-full sm:w-auto">
                @csrf
                <button type="submit"
                    class="w-full sm:w-auto rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 transition-rk">
                    Logout
                </button>
            </form>
        </div>

        <div class="pt-4 text-xs text-rk-slate">
            Tipp: Bitte auch den Spam-Ordner prüfen.
        </div>
    </div>

    <div class="mt-6 text-center text-xs text-rk-slate">
        <span class="lg:hidden">Rettungsdienst · Inventory System</span>
    </div>
</x-layouts.auth>