<el-dialog {{ attributes.defaults(stimulus_controller('ferienpass/admin-modal')) }}>
    <dialog data-ferienpass--admin-modal-target="dialog"
            id="admin-modal-dialog"
            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 data-ferienpass--admin-modal-target="panel" class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95 dark:bg-gray-900 group/modal-panel has-[[data-modal-variant=large]]:rounded-none sm:has-[[data-modal-variant=large]]:max-w-5xl has-[[data-modal-narrow]]:sm:max-w-sm">
                <div class="absolute hidden sm:block top-0 right-0 pt-4 pr-4 z-20 group-has-[[data-modal-hide-close]]/modal-panel:hidden">
                    <button type="button"
                            command="close"
                            commandfor="admin-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="Schließen">
                        <twig:ux:icon name="ph:x" class="h-6 w-6" />
                    </button>
                </div>

                <div class="w-full has-[[data-modal-variant=large]]:h-[80vh] sm:has-[[data-modal-variant=large]]:h-[75vh] overflow-y-auto">
                    {% if block('content') is defined %}
                        {{ block('content')|raw }}
                    {% else %}
                        <turbo-frame id="modal" class="@container block h-full" {{ stimulus_target('ferienpass/admin-modal', 'dynamicContent') }}></turbo-frame>
                    {% endif %}
                </div>
            </el-dialog-panel>
        </div>
    </dialog>
</el-dialog>
