<div data-controller="ferienpass--admin-create-palette"
>
    <el-dialog>
        <dialog id="admin-create-palette" class="backdrop:bg-transparent" data-ferienpass--admin-create-palette-target="dialog">
            <el-dialog-backdrop class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-gray-900/50"></el-dialog-backdrop>

            <div tabindex="0" class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20">
                <el-dialog-panel data-ferienpass--admin-create-palette-target="panel" class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 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 dark:bg-gray-900 dark:ring-white/10">
                    <el-command-palette data-ferienpass--admin-create-palette-target="palette" data-action="select->ferienpass--admin-create-palette#onSelect" class="divide-y divide-gray-100 dark:divide-white/10">
                        <div class="grid grid-cols-1">
                            <input type="text" autofocus placeholder="Was möchten Sie erstellen? ..." class="col-start-1 row-start-1 h-12 w-full border-0 bg-transparent pr-4 pl-11 text-base text-gray-900 outline-hidden focus:ring-0 rounded-none shadow-none placeholder:text-gray-400 sm:text-sm dark:text-white dark:placeholder:text-gray-500" />
                            <twig:ux:icon name="ph:magnifying-glass" class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400 dark:text-gray-500" aria-hidden="true" />
                        </div>

                        <div class="flex transform-gpu divide-x divide-gray-100 dark:divide-white/10" data-ferienpass--admin-create-palette-target="layoutWrapper">
                            <div class="max-h-96 min-w-0 flex-auto scroll-py-4 overflow-y-auto px-6 py-4" data-ferienpass--admin-create-palette-target="listContainer">
                                <el-command-list class="-mx-2 block text-sm text-gray-700 dark:text-gray-300" data-ferienpass--admin-create-palette-target="list">
                                    <el-defaults>
                                            <a id="create-attendance" href="{{ path('admin_attendance_create_component') }}" data-turbo-stream="true" aria-labelledby="label-create-attendance" class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100 dark:aria-selected:bg-white/5">
                                                <div class="flex size-10 flex-none items-center justify-center rounded-lg bg-pink-500">
                                                    <twig:ux:icon name="ph:check-circle" class="size-6 text-white" aria-hidden="true" />
                                                </div>
                                                <div class="ml-4 flex-auto">
                                                    <p id="label-create-attendance" class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900 dark:text-gray-300 dark:group-aria-selected:text-white">Anmeldung (Schnell-Erfassung)</p>
                                                    <p class="text-sm text-gray-500 group-aria-selected:text-gray-700 dark:text-gray-400 dark:group-aria-selected:text-gray-300">Erfassen Sie schnell eine neue Anmeldung für ein Angebot.</p>
                                                </div>
                                            </a>

                                        {% if is_granted('ROLE_PARTICIPANTS_ADMIN') %}
                                            <a href="{{ path('admin_participants_create') }}" aria-labelledby="label-create-participant" class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100 dark:aria-selected:bg-white/5">
                                                <div class="flex size-10 flex-none items-center justify-center rounded-lg bg-violet-500">
                                                    <twig:ux:icon name="ph:users" class="size-6 text-white" aria-hidden="true" />
                                                </div>
                                                <div class="ml-4 flex-auto">
                                                    <p id="label-create-participant" class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900 dark:text-gray-300 dark:group-aria-selected:text-white">Teilnehmer</p>
                                                    <p class="text-sm text-gray-500 group-aria-selected:text-gray-700 dark:text-gray-400 dark:group-aria-selected:text-gray-300">Legen Sie einen neuen Teilnehmer in der Datenbank an.</p>
                                                </div>
                                            </a>
                                        {% endif %}

                                        {% if is_granted('ROLE_ADMIN') %}
                                            <a href="{{ path('admin_hosts_create') }}" aria-labelledby="label-create-host" class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100 dark:aria-selected:bg-white/5">
                                                <div class="flex size-10 flex-none items-center justify-center rounded-lg bg-blue-500">
                                                    <twig:ux:icon name="ph:user-circle" class="size-6 text-white" aria-hidden="true" />
                                                </div>
                                                <div class="ml-4 flex-auto">
                                                    <p id="label-create-host" class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900 dark:text-gray-300 dark:group-aria-selected:text-white">Veranstalter</p>
                                                    <p class="text-sm text-gray-500 group-aria-selected:text-gray-700 dark:text-gray-400 dark:group-aria-selected:text-gray-300">Erstellen Sie ein neues Veranstalter-Profil.</p>
                                                </div>
                                            </a>

                                            <a href="{{ path('admin_editions_create') }}" aria-labelledby="label-create-edition" class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100 dark:aria-selected:bg-white/5">
                                                <div class="flex size-10 flex-none items-center justify-center rounded-lg bg-indigo-500">
                                                    <twig:ux:icon name="ph:plus" class="size-6 text-white" aria-hidden="true" />
                                                </div>
                                                <div class="ml-4 flex-auto">
                                                    <p id="label-create-edition" class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900 dark:text-gray-300 dark:group-aria-selected:text-white">Ferienpass-Edition</p>
                                                    <p class="text-sm text-gray-500 group-aria-selected:text-gray-700 dark:text-gray-400 dark:group-aria-selected:text-gray-300">Legen Sie eine neue Ferienpass-Saison an.</p>
                                                </div>
                                            </a>
                                        {% endif %}

                                        {{ render(controller('Ferienpass\\AdminBundle\\Controller\\AdminCreateController::editions')) }}
                                    </el-defaults>
                                </el-command-list>
                            </div>

                            <twig:Turbo:Frame id="admin-create-palette-frame" data-ferienpass--admin-create-palette-target="frame" class="hidden max-h-96 data-[has-content=true]:max-h-[80vh] min-w-0 flex-auto overflow-y-auto transition-all duration-300" />
                        </div>

                        <el-no-results hidden class="block px-6 py-14 text-center text-sm sm:px-14">
                            <twig:ux:icon name="ph:warning-circle" class="mx-auto size-6 text-gray-400 dark:text-gray-500" aria-hidden="true" />
                            <p class="mt-4 font-semibold text-gray-900 dark:text-white">Keine Ergebnisse gefunden</p>
                            <p class="mt-2 text-gray-500 dark:text-gray-400">Für diesen Suchbegriff konnten wir nichts finden.</p>
                        </el-no-results>
                    </el-command-palette>
                </el-dialog-panel>
            </div>
        </dialog>
    </el-dialog>
</div>
