@props(['name', 'title' => null, 'maxWidth' => '2xl', 'show' => false])
@php
    $widths = ['sm' => 'sm:max-w-sm', 'md' => 'sm:max-w-md', 'lg' => 'sm:max-w-lg', 'xl' => 'sm:max-w-xl', '2xl' => 'sm:max-w-2xl', '3xl' => 'sm:max-w-3xl', '4xl' => 'sm:max-w-4xl', '5xl' => 'sm:max-w-5xl'];
@endphp
{{-- Open with: $dispatch('open-modal', '{{ $name }}') — close with: $dispatch('close-modal', '{{ $name }}') --}}
<div x-data="{ show: @js((bool) $show) }"
     x-on:open-modal.window="if ($event.detail === '{{ $name }}') show = true"
     x-on:close-modal.window="if ($event.detail === '{{ $name }}') show = false"
     x-on:keydown.escape.window="show = false"
     x-show="show" x-cloak class="fixed inset-0 z-[70] overflow-y-auto px-4 py-8 sm:px-0">
    <div x-show="show" x-transition.opacity class="fixed inset-0 bg-ink-950/60 backdrop-blur-sm" @click="show = false"></div>
    <div x-show="show" x-trap.inert.noscroll="show"
         x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         class="relative mx-auto w-full {{ $widths[$maxWidth] ?? $widths['2xl'] }} overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-ink-200 dark:bg-ink-900 dark:ring-ink-700">
        @if ($title)
            <div class="flex items-center justify-between border-b border-ink-100 px-6 py-4 dark:border-ink-800">
                <h3 class="text-base font-semibold text-ink-900 dark:text-white">{{ $title }}</h3>
                <button type="button" class="btn-icon" @click="show = false"><x-heroicon-m-x-mark class="h-5 w-5" /></button>
            </div>
        @endif
        <div class="px-6 py-5">{{ $slot }}</div>
        @isset($footer)
            <div class="flex justify-end gap-2 border-t border-ink-100 bg-ink-50/60 px-6 py-3 dark:border-ink-800 dark:bg-ink-900">{{ $footer }}</div>
        @endisset
    </div>
</div>