@props([
    'show',
    'title' => null,
    'close' => 'closeSidebar()',
])

<aside x-show="{{ $show }}" x-cloak
       class="meet-room-panel meet-room-panel__pane"
       @keydown.escape.window="{{ $close }}">
    <div 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">
                @isset($header)
                    {{ $header }}
                @elseif ($title)
                    <h2 class="text-sm font-semibold text-white">{{ $title }}</h2>
                @endif
                @isset($subtitle)
                    <div class="text-xs text-slate-400">{{ $subtitle }}</div>
                @endisset
            </div>
            <button @click="{{ $close }}" 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>