<div x-data="{modalIsOpen: false}" class="overflow-y-auto">
    <button @click="modalIsOpen = true" type="button" id="{{ id }}"
        class="{% if buttonClass %}{{ buttonClass }}{% else %}inline-flex cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white{% endif %}">{{ label }}</button>
    <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen"
        @keydown.esc.window="modalIsOpen = false" @click.self="modalIsOpen = false"
        class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 p-4 pb-8 backdrop-blur-md sm:items-center lg:p-8"
        role="dialog" aria-modal="true" aria-labelledby="{{ id }}-ModalTitle">
        <!-- Modal Dialog -->
        <div x-show="modalIsOpen"
            x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity"
            x-transition:enter-start="opacity-0 scale-50" x-transition:enter-end="opacity-100 scale-100"
            class="{% if modalClass %}{{ modalClass }}{% else %}flex max-w-lg flex-col gap-4 overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300{% endif %}">
            <!-- Dialog Header -->
            <div
                class="{% if headerClass %}{{ headerClass }}{% else %}flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20{% endif %}">
                <h3 id="{{ id }}-ModalTitle"
                    class="{% if headerLabelClass %}{{ headerLabelClass }}{% else %}font-semibold tracking-wide text-neutral-900 dark:text-white{% endif %}">
                    {{ header }}</h3>
                <button @click="modalIsOpen = false" aria-label="close modal">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
                        fill="none" stroke-width="1.4" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <!-- Dialog Body -->
            <div class="{% if bodyClass %}{{ bodyClass }}{% else %}px-4 pb-4{% endif %}">
                {{ slot }}
            </div>
        </div>
    </div>
</div>