@props([
    'openEventName' => 'openModal',
    'closeEventName' => 'closeModal',
    'afterCloseEvent' => 'afterClose',
    'show' => false,
    'customContent' => false,
    'showAboveSearch' => false
])

<div
    x-cloak
    x-data="{
        show: @js($show),
        loading:false,
        url: '',

        openModal(e) {
            this.show = true;
            this.url = e.detail.uri
            this.submittedResponseData = {};
        },
        closeModal() {
            this.$dispatch(@js($afterCloseEvent));
            this.show = false;
        }
    }"
    {{ '@'.$openEventName }}.window="openModal"
    {{ '@'.$closeEventName }}.window="closeModal"
    @keyup.escape.window="closeModal"
    x-show="show"
    role="dialog"
    x-trap.noscroll="show"
    x-transition:enter="transition ease-swift-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-swift-out duration-300"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed flex flex-col w-full inset-0 {{ $showAboveSearch ? 'z-[100]' : 'z-50' }} overflow-y-auto "
>
    <div @click="closeModal" class="fixed flex-col w-full inset-0 bg-black/80 backdrop-blur-sm"></div>

    @if(!$customContent)
        <div class="sticky top-0 flex sm:justify-end justify-center p-2" @click="closeModal">
            <button class="btn btn-on-dark p-2">
                <x-icon name="close" class="w-1.5rem] h-[1.5rem] md:w-[2rem] md:h-[2rem] text-white" />
            </button>
        </div>

        <div class="relative container-3 w-full h-full">
            {{ $slot??'' }}
        </div>
    @else
        {{ $slot??'' }}
    @endif
</div>