<el-dialog {{ attributes.defaults(stimulus_controller('ferienpass/cms-modal'))|raw }}>
    <dialog data-ferienpass--cms-modal-target="dialog"
            id="modal-dialog"
            data-action="modal:open@window->ferienpass--cms-modal#open"
            class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
            aria-labelledby="modal-headline">
        <el-dialog-backdrop class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

        <div tabindex="0" class="flex min-h-full items-center justify-center p-4 text-center focus:outline-none sm:p-0">
            <el-dialog-panel class="relative transform overflow-hidden bg-white text-left shadow-xl transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in w-full sm:my-8 sm:max-w-4xl dark:bg-gray-900">
                <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4 z-20">
                    <button type="button"
                            command="close"
                            commandfor="modal-dialog"
                            class="text-gray-400 dark:text-gray-700 hover:text-gray-500 dark:hover:text-gray-600 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
                            aria-label="{{ 'userAccount_close_account.modal.close'|trans({}, 'cms') }}">
                        <twig:ux:icon name="lucide:x" class="h-6 w-6" />
                    </button>
                </div>

                <turbo-frame id="modal" class="overflow-y-auto" {{ stimulus_target('ferienpass/cms-modal', 'dynamicContent') }}></turbo-frame>
            </el-dialog-panel>
        </div>
    </dialog>
</el-dialog>
