{{--
    Оболочка модального окна.

    Закрывается тремя способами — крестиком, кликом вне и Escape. Любой
    отсутствующий читается как «окно зависло», поэтому есть все три.

    Открытием управляет одноимённый стор Alpine (`resources/js/app.js`):
    кнопка в шапке и содержимое окна живут в разных углах разметки, и общего
    родителя с `x-data` у них нет.
--}}
@props([
    'store',
    'title',
    'width' => 'max-w-md',
])

{{-- x-data обязателен: директивы вне компонента Alpine просто не обрабатывает. --}}
<div x-data x-cloak x-show="$store.{{ $store }}.open"
     x-on:keydown.escape.window="$store.{{ $store }}.hide()"
     class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-[8vh]"
     role="dialog" aria-modal="true" aria-label="{{ $title }}">

    <div x-on:click.outside="$store.{{ $store }}.hide()"
         class="w-full {{ $width }} rounded-card bg-surface p-6 shadow-card-hover">

        <div class="mb-4 flex items-start justify-between gap-4">
            {{-- h2, а не h1: окно есть на каждой странице, а второй H1 портит разметку (ТЗ §18.1). --}}
            <h2 class="text-xl font-extrabold tracking-tight text-text-strong">{{ $title }}</h2>

            <button type="button" x-on:click="$store.{{ $store }}.hide()" aria-label="Закрыть"
                    class="-m-1.5 rounded-control p-1.5 text-xl leading-none text-muted transition-colors hover:bg-surface-alt hover:text-text">
                <span aria-hidden="true">✕</span>
            </button>
        </div>

        {{ $slot }}
    </div>
</div>