{% from "partials/icons.html" import search, play, square, rotate_cw, cloud_download, refresh_cw, file_text, check, home, terminal, box %}

<!-- Icons for command palette (referenced by JS) -->
<template id="cmd-icons">
    <span data-icon="play">{{ play() }}</span>
    <span data-icon="square">{{ square() }}</span>
    <span data-icon="rotate_cw">{{ rotate_cw() }}</span>
    <span data-icon="cloud_download">{{ cloud_download() }}</span>
    <span data-icon="refresh_cw">{{ refresh_cw() }}</span>
    <span data-icon="file_text">{{ file_text() }}</span>
    <span data-icon="check">{{ check() }}</span>
    <span data-icon="home">{{ home() }}</span>
    <span data-icon="terminal">{{ terminal() }}</span>
    <span data-icon="box">{{ box() }}</span>
</template>
<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>