@props(['show' => 'showModal'])

<div x-show="{{ $show }}" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title">
    <div class="flex min-h-screen items-center justify-center p-4">
        <div x-show="{{ $show }}" @click="{{ $show }} = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"></div>
        <div x-show="{{ $show }}" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="relative w-full max-w-xl">
            {{ $slot }}
        </div>
    </div>
</div>