<el-dialog {{ attributes.defaults(stimulus_controller('ferienpass/admin-slideover')) }}>

    <dialog id="admin-slideover-dialog"
            data-ferienpass--admin-slideover-target="dialog"
            aria-labelledby="slide-over-title"
            class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent not-open:hidden backdrop:bg-transparent">
        <el-dialog-backdrop class="absolute inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out data-closed:opacity-0 dark:bg-gray-900/50"></el-dialog-backdrop>

        <div tabindex="0" class="absolute inset-0 pl-10 focus:outline-none sm:pl-16">
            <el-dialog-panel data-ferienpass--admin-slideover-target="panel" class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700">
                <div class="relative flex h-full flex-col overflow-y-auto bg-white shadow-xl dark:bg-gray-900 after:absolute after:inset-y-0 after:left-0 after:w-px after:bg-gray-200 dark:after:bg-white/10">
                                <button type="button"
                                        command="close"
                                        commandfor="admin-slideover-dialog"
                                        class="z-10 absolute right-4 sm:right-6 top-6 rounded-md text-gray-400 hover:text-gray-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:hover:text-white dark:focus-visible:outline-primary-500 transition-colors">
                                    <span class="absolute -inset-2.5"></span>
                                    <span class="sr-only">Close panel</span>
                                    <twig:ux:icon name="ph:x" aria-hidden="true" class="size-6" />
                                </button>
                    <div class="relative flex-1">
                        <turbo-frame class="@container" id="slideover" {{ stimulus_target('ferienpass/admin-slideover', 'dynamicContent') }}></turbo-frame>
                    </div>
                </div>
            </el-dialog-panel>
        </div>
    </dialog>
</el-dialog>
