<x-meet-kiosk-layout :title="($room->isConference() ? 'Conference ended' : 'Meeting ended').' · '.$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-slate-100 text-slate-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="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
                </svg>
            </div>
            <h1 class="mt-6 text-2xl font-bold text-slate-900">{{ $room->isConference() ? 'Conference ended' : 'Meeting ended' }}</h1>
            <p class="mt-3 text-sm text-slate-600">The host has ended this {{ $room->isConference() ? 'conference' : 'meeting' }}.</p>
            <p class="mt-1 text-sm font-medium text-slate-700">{{ $room->title }}</p>

            <div class="mt-8 flex flex-col gap-3">
                @if ($canGiveFeedback)
                    <a href="{{ route('meet.left', $session) }}" class="btn-primary btn-primary-lg py-3.5 font-semibold">
                        Share feedback
                    </a>
                @endif
                @auth
                    <a href="{{ route('meet.dashboard') }}"
                       class="{{ $canGiveFeedback ? 'btn-secondary py-3.5 font-semibold' : 'btn-primary btn-primary-lg py-3.5 font-semibold' }}">
                        Back to Meet
                    </a>
                @else
                    <a href="{{ route('meet.join', $room) }}"
                       class="{{ $canGiveFeedback ? 'btn-secondary py-3.5 font-semibold' : 'btn-primary btn-primary-lg py-3.5 font-semibold' }}">
                        Return to join page
                    </a>
                @endauth
            </div>
        </div>
    </div>
</x-meet-kiosk-layout>
