<div data-controller="ferienpass--admin-command-palette"
     data-ferienpass--admin-command-palette-search-url-value="{{ path('admin_search') }}"
  >
    <el-dialog>
        <dialog id="admin-command-palette" class="backdrop:bg-transparent" data-ferienpass--admin-command-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 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 id="command" class="divide-y divide-gray-100 dark:divide-white/10" data-ferienpass--admin-command-palette-target="palette" data-action="change->ferienpass--admin-command-palette#onSelectionChange select->ferienpass--admin-command-palette#onSelect click->ferienpass--admin-command-palette#onSelect">
            <div class="grid grid-cols-1">
                <input type="text" 
                       autofocus 
                       placeholder="Suchen..." 
                       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"
                       data-ferienpass--admin-command-palette-target="input"
                       data-action="input->ferienpass--admin-command-palette#onInput" />
                <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-command-palette-target="previewPane">
                <div class="max-h-96 min-w-0 flex-auto scroll-py-4 overflow-y-auto px-6 py-4">
                    <el-command-list hidden class="-mx-2 block text-sm text-gray-700 dark:text-gray-300">
                        <el-defaults data-ferienpass--admin-command-palette-target="defaults">
                            <div class="px-6 py-14 text-center text-sm">
                                <p class="text-gray-500 dark:text-gray-400">Geben Sie mindestens 2 Zeichen ein, um die Suche zu starten.</p>
                            </div>
                        </el-defaults>

                        <div data-ferienpass--admin-command-palette-target="list"></div>

                        <div data-ferienpass--admin-command-palette-target="sentinel" aria-hidden="true" class="h-1"></div>

                        <el-no-results hidden class="block px-6 py-14 text-center text-sm sm:px-14" data-ferienpass--admin-command-palette-target="empty">
                            <twig:ux:icon name="ph:warning" 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">Wir konnten nichts mit diesem Begriff finden. Bitte versuchen Sie es erneut.</p>
                        </el-no-results>
                    </el-command-list>

                    <div class="hidden px-6 py-14 text-center text-sm in-data-[mode=help]:block sm:px-14">
                        <twig:ux:icon name="ph:lifebuoy" 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">Hilfe zur Suche</p>
                        <p class="mt-2 text-gray-500 dark:text-gray-400">Verwenden Sie dieses Tool, um schnell nach Benutzer:innen, Teilnehmenden, Angeboten und Belegen auf unserer gesamten Plattform zu suchen. Sie können auch die Suchmodifikatoren in der Fußzeile verwenden, um die Ergebnisse auf nur Benutzer:innen, Teilnehmende, Angebote oder Belege zu beschränken.</p>
                    </div>
                </div>

                <el-command-preview for="" data-ferienpass--admin-command-palette-target="emptyPreview" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
                    <div class="flex h-full items-center justify-center p-6 text-center text-sm text-gray-500 dark:text-gray-400">
                        Wählen Sie ein Element aus, um eine Vorschau anzuzeigen.
                    </div>
                </el-command-preview>
            </div>

            <div class="flex flex-wrap items-center bg-gray-50 px-4 py-2.5 text-xs text-gray-700 dark:bg-gray-800/50 dark:text-gray-300">
                Tippen Sie <kbd class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=user]:border-primary-600 in-data-[mode=user]:text-primary-600 sm:mx-2 dark:border-white/10 dark:bg-gray-800 dark:text-white dark:in-data-[mode=user]:border-primary-500 dark:in-data-[mode=user]:text-primary-500">@</kbd> für Benutzer:innen, <kbd class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=participant]:border-primary-600 in-data-[mode=participant]:text-primary-600 sm:mx-2 dark:border-white/10 dark:bg-gray-800 dark:text-white dark:in-data-[mode=participant]:border-primary-500 dark:in-data-[mode=participant]:text-primary-500">#</kbd> für Teilnehmende, <kbd class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=offer]:border-primary-600 in-data-[mode=offer]:text-primary-600 sm:mx-2 dark:border-white/10 dark:bg-gray-800 dark:text-white dark:in-data-[mode=offer]:border-primary-500 dark:in-data-[mode=offer]:text-primary-500">></kbd> für Angebote und <kbd class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=payment]:border-primary-600 in-data-[mode=payment]:text-primary-600 sm:mx-2 dark:border-white/10 dark:bg-gray-800 dark:text-white dark:in-data-[mode=payment]:border-primary-500 dark:in-data-[mode=payment]:text-primary-500">€</kbd> für Belege.
            </div>
        </el-command-palette>
                </el-dialog-panel>
            </div>
        </dialog>
    </el-dialog>
</div>
