{% from "partials/icons.html" import search %}
<dialog id="cmd-palette" class="modal">
    <div class="modal-box max-w-lg p-0">
        <label class="input input-lg bg-base-100 border-0 border-b border-base-300 w-full rounded-none rounded-t-box sticky top-0 z-10 focus-within:outline-none">
            {{ search(20) }}
            <input type="text" id="cmd-input" class="grow" placeholder="Type a command..." autocomplete="off" />
            <kbd class="kbd kbd-sm opacity-50">esc</kbd>
        </label>
        <div id="cmd-list" class="flex flex-col p-2 max-h-80 overflow-y-auto">
            <!-- Populated by JS -->
        </div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

<!-- Floating button to open command palette -->
<button id="cmd-fab" class="btn btn-circle glass shadow-lg fixed bottom-6 right-6 z-50 hover:ring hover:ring-base-content/50" title="Command Palette (⌘K)">
    <span class="flex items-center gap-0.5 text-sm font-semibold">
        <span class="opacity-70">⌘</span><span>K</span>
    </span>
</button>