{{--
    A dialog for the forms that are too big for a row and too small for a page.

    Visibility is the component's state (`:show="$editing"`), so a dropped
    websocket or a validation error never leaves a half-open modal behind -
    which is why this is not the theme's data-tw-toggle modal, only its look.
--}}
@props(['show' => false, 'title' => null, 'close' => null, 'width' => 'max-w-lg'])

@if ($show)
    <div class="fixed inset-0 z-[60] flex items-start justify-center overflow-y-auto bg-slate-900/50 p-4 sm:p-8">
        <div {{ $attributes->class(['modal-content w-full rounded-md bg-white shadow-md', $width]) }}>
            <div class="modal-header flex items-center justify-between">
                <h2 class="font-medium text-base mr-auto">{{ $title }}</h2>
                @if ($close)
                    <button type="button" wire:click="{{ $close }}" class="text-slate-400 transition hover:text-slate-700"
                        aria-label="{{ __('Close') }}">
                        <x-ui.icon name="x" class="w-5 h-5" />
                    </button>
                @endif
            </div>

            <div class="modal-body">{{ $slot }}</div>

            @isset($footer)
                <div class="modal-footer flex items-center justify-end gap-3">{{ $footer }}</div>
            @endisset
        </div>
    </div>
@endif