<x-meet-kiosk-layout :title="'Passcode · '.$room->title" :organization="$organization" eyebrow="{{ $room->isConference() ? 'Secure conference' : 'Secure meeting' }}">
    <div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center">
        <div class="w-full max-w-md rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
            <h1 class="text-2xl font-bold text-slate-900">{{ $room->title }}</h1>
            <p class="mt-2 text-sm text-slate-500">This {{ $room->isConference() ? 'conference' : 'meeting' }} is protected. Enter the passcode to continue.</p>

            @if ($errors->any())
                <div class="mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('meet.join.passcode', $room) }}" class="mt-6 space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-slate-700">Passcode</label>
                    <input type="password" name="passcode" required autofocus
                           class="mt-2 w-full rounded-2xl border-slate-200 bg-white px-4 py-3.5 text-slate-900 shadow-sm ring-1 ring-slate-200 focus:border-indigo-500 focus:ring-indigo-500">
                </div>
                <button type="submit" class="btn-primary btn-primary-lg w-full py-3.5 font-semibold">Continue</button>
            </form>
        </div>
    </div>
</x-meet-kiosk-layout>
