{% load i18n %}

{% if request.user.is_staff %}
    <div class="backdrop-blur-xs bg-base-900/20 flex flex-col fixed inset-0 p-4 lg:p-32 z-[1000] dark:bg-base-900/80"
         x-data="searchCommand()"
         x-on:opencommand.window="handleOpen()"
         x-on:keydown.window="handleShortcut($event)"
         x-show="openCommandResults">
        <div class="bg-base-50 dark:bg-base-800 flex flex-col max-w-3xl min-h-0 mx-auto overflow-hidden rounded-default shadow-lg w-full" x-on:click.outside="handleOutsideClick()">
            <div class="flex flex-row items-center px-4 w-full">
                <button type="submit" id="command-submit" class="group flex items-center focus:outline-hidden">
                    <span class="block material-symbols-outlined text-xl text-base-400 dark:text-base-500 group-[.htmx-request]:hidden">
                        search
                    </span>

                    <span class="hidden material-symbols-outlined text-xl text-base-400 dark:text-base-500 group-[.htmx-request]:block animate-spin">
                        progress_activity
                    </span>
                </button>

                <input
                    autocomplete="off"
                    type="search"
                    placeholder="{% trans "Type to search" %}"
                    class="[&::-webkit-search-cancel-button]:hidden font-medium grow px-2 py-4 placeholder-text-subtle text-important focus:outline-hidden"
                    name="s"
                    id="search-input-command"
                    x-ref="searchInputCommand"
                    hx-indicator="#command-submit"
                    x-on:keydown.escape.prevent="handleClear()"
                    x-on:keydown.arrow-down.prevent="nextItem()"
                    x-on:keydown.arrow-up.prevent="prevItem()"
                    x-on:keydown.meta.enter.prevent="selectItem({% if command_show_history %}true{% else %}false{% endif %}, true)"
                    x-on:keydown.ctrl.enter.prevent="selectItem({% if command_show_history %}true{% else %}false{% endif %}, true)"
                    x-on:keydown.enter.prevent="if (!$event.metaKey && !$event.ctrlKey) selectItem({% if command_show_history %}true{% else %}false{% endif %}, false)"
                    hx-get="{% url "admin:search" %}?extended=1"
                    hx-trigger="keyup changed delay:500ms"
                    hx-select="#command-results-list"
                    hx-select-oob="#command-results-note"
                    hx-target="#command-results">

                <span class="material-symbols-outlined text-icon-action" x-on:click="handleClear()">
                    close
                </span>
            </div>

            <div class="bg-white border border-b-0 border-base-200 flex flex-col grow -mx-px min-h-0 rounded-default dark:border-base-700 dark:bg-white/[.04]">
                <div class="grow h-full overflow-y-auto" data-simplebar x-on:htmx:after-swap="handleContentLoaded($event)">
                    <div id="command-results"></div>

                    {% if command_show_history %}
                        {% include "unfold/helpers/command_history.html" %}
                    {% endif %}
                </div>

                {% include "unfold/helpers/command_help.html" %}
            </div>
        </div>
    </div>
{% endif %}