<x-meet-kiosk-layout :title="'Access denied · '.$room->title" :organization="$organization">
    <div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center text-center">
        <div class="w-full max-w-md rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-amber-50 text-amber-600">
                <svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
                </svg>
            </div>
            <h1 class="mt-6 text-2xl font-bold text-slate-900">Unable to join</h1>
            <p class="mt-3 text-sm text-slate-600">{{ $reason ?? 'You do not have access to this '.match (true) { $room->isSpace() => 'room', $room->isConference() => 'conference', $room->isWebinar() => 'webinar', default => 'meeting' } }}.' }}</p>
            <a href="{{ route('sso.connect', ['redirect' => route('meet.join', $room), 'interactive' => 1]) }}" class="btn-primary btn-primary-lg mt-8 inline-flex w-full items-center justify-center py-3.5 font-semibold">
                Sign in with Ladill
            </a>
        </div>
    </div>
</x-meet-kiosk-layout>
