{{-- resources/views/auth/confirm-password.blade.php --}}
<x-layouts.auth :title="'Passwort bestätigen · ' . 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 bestätigen</h2>
                <p class="mt-1 text-sm text-rk-slate">
                    Das ist ein geschützter Bereich. Bitte bestätige dein Passwort, um fortzufahren.
                </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.confirm') }}">
            @csrf

            <div>
                <label for="password" class="block text-sm font-medium">Passwort</label>
                <input id="password" name="password" type="password" autocomplete="current-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>

            <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">
                Bestätigen
            </button>

            <div class="pt-2 text-xs text-rk-slate">
                Wenn du dein Passwort nicht mehr weißt, nutze „Passwort vergessen?“ im Login.
            </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>