@props([
    'show',
    'title',
])

<aside x-show="{{ $show }}" x-cloak
       class="meet-room-panel"
       @keydown.escape.window="{{ $show }} = false">
    <div x-show="{{ $show }}"
         x-transition:enter="transition-opacity ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="meet-room-panel__backdrop"
         @click="{{ $show }} = false"
         aria-hidden="true"></div>

    <div x-show="{{ $show }}"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="translate-y-full sm:translate-y-0"
         x-transition:enter-end="translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="translate-y-0"
         x-transition:leave-end="translate-y-full sm:translate-y-0"
         class="meet-room-panel__sheet">
        <div class="meet-room-panel__handle" aria-hidden="true"><span></span></div>

        <div class="meet-room-panel__header">
            <div class="min-w-0">
                <h2 class="text-sm font-semibold text-white">{{ $title }}</h2>
                @isset($subtitle)
                    <div class="text-xs text-slate-400">{{ $subtitle }}</div>
                @endisset
            </div>
            <button @click="{{ $show }} = false" type="button"
                    class="shrink-0 rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-800 hover:text-white"
                    title="Close">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <div class="meet-room-panel__body">
            {{ $slot }}
        </div>
    </div>
</aside>