{{-- resources/views/auth/forgot-password.blade.php --}}
<x-layouts.auth :title="'Passwort vergessen · ' . 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">Passwort zurücksetzen</h2>
                <p class="mt-1 text-sm text-rk-slate">
                    Gib deine E-Mail ein. Du erhältst einen Link, um ein neues Passwort zu vergeben.
                </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="M12 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                    <path d="M6 10h12v10H6V10Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
                    <path d="M12 15v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                </svg>
            </div>
        </div>

        @if (session('status'))
            <div class="mt-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                <div class="font-medium">Bitte prüfen:</div>
                <ul class="mt-2 list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form class="mt-6 space-y-5" method="POST" action="{{ route('password.email') }}">
            @csrf

            <div>
                <label for="email" class="block text-sm font-medium">E-Mail</label>
                <input id="email" name="email" type="email" autocomplete="username" required
                    value="{{ old('email') }}"
                    class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                    placeholder="name@domain.at">
                @error('email')
                    <div class="mt-2 text-sm text-red-700">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit"
                class="w-full 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">
                Reset-Link senden
            </button>

            <div class="flex items-center justify-between">
                <a href="{{ route('login') }}" class="text-sm text-rk-red hover:underline">
                    Zurück zum Login
                </a>
                <span class="text-xs text-rk-slate/80">
                    DSGVO-konform · interne Nutzung
                </span>
            </div>

            <div class="pt-2 text-xs text-rk-slate">
                Tipp: Prüfe auch den Spam-Ordner, falls die E-Mail nicht sofort ankommt.
            </div>
        </form>
    </div>

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