@props([
    'title',
    'subtitle' => null,
    // Name of the Livewire boolean that opens this modal. Closing sets it
    // false, so there is one source of truth for open/closed rather than
    // Bootstrap's JS state and Livewire's disagreeing after a re-render.
    'closes',
])

<div class="sub-modal"
    x-data
    x-init="
        document.body.classList.add('sub-modal-open');
        $watch(() => false, () => {});
    "
    x-on:keydown.escape.window="$wire.set('{{ $closes }}', false)"
    {{-- The overlay unmounts with the modal, so the scroll lock has to be
         released here rather than on a close handler that may never fire. --}}
    x-destroy="document.body.classList.remove('sub-modal-open')">

    <div class="sub-modal__backdrop" wire:click="$set('{{ $closes }}', false)"></div>

    <div class="sub-modal__card" role="dialog" aria-modal="true"
        aria-label="{{ $title }}">
        <div class="sub-modal__head">
            <div>
                <h6>{{ $title }}</h6>
                @if ($subtitle)
                    <p>{{ $subtitle }}</p>
                @endif
            </div>
            <button type="button" class="subs-icon-btn" wire:click="$set('{{ $closes }}', false)"
                aria-label="{{ __('Close') }}">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>

        <div class="sub-modal__body">
            {{ $slot }}
        </div>

        @isset($footer)
            <div class="sub-modal__foot">
                {{ $footer }}
            </div>
        @endisset
    </div>
</div>