{{-- resources/views/auth/reset-password.blade.php --}}
<x-layouts.auth :title="'Passwort zurücksetzen · ' . 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">Neues Passwort setzen</h2>
                <p class="mt-1 text-sm text-rk-slate">
                    Bitte ein neues Passwort vergeben und bestätigen.
                </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 ($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.store') }}">
            @csrf

            <input type="hidden" name="token" value="{{ $request->route('token') }}">

            <div>
                <label for="email" class="block text-sm font-medium">E-Mail</label>
                <input id="email" name="email" type="email" autocomplete="username" required autofocus
                    value="{{ old('email', $request->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">
                @error('email')
                    <div class="mt-2 text-sm text-red-700">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-medium">Neues Passwort</label>
                <input id="password" name="password" type="password" autocomplete="new-password" required
                    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="••••••••">
                @error('password')
                    <div class="mt-2 text-sm text-red-700">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label for="password_confirmation" class="block text-sm font-medium">Passwort bestätigen</label>
                <input id="password_confirmation" name="password_confirmation" type="password"
                    autocomplete="new-password" required
                    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="••••••••">
                @error('password_confirmation')
                    <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">
                Passwort speichern
            </button>

            <div class="flex items-center justify-between pt-2">
                <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">Interne Nutzung</span>
            </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>