<div class="pl-2 pr-2 py-1.5 rounded-sm text-xs flex bg-base-100 gap-2 items-center" xmlns:hx-on="http://www.w3.org/1999/xhtml">
    <div class="join" id="tag_search_bar">
        <button class="btn btn-neutral btn-xs join-item" id="tag-selection-toggle" onclick="window['toggleTagPanel']()">
            <span><span class="shortcut_key"
            >t</span>ags</span>
        </button>
        <span class="btn btn-neutral btn-xs join-item" id="task_action_bar">
            <button hx-get="task_action_bar" hx-target="#task_action_bar" hx-swap="outerHTML"
                    hx-trigger="click,keyup[key=='s'] from:#cmd-inp">ta<span class="shortcut_key">s</span>k</button>
        </span>
        <button class="btn btn-xs btn-neutral join-item"
                hx-get="tasks/undo/report"
                hx-trigger="click,keyup[{{mod_key}}key=='u'] from:#cmd-inp"
                hx-target="#all-dialog-boxes"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">u</span>ndo</span>
        </button>
        <button class="btn btn-xs btn-neutral join-item"
                hx-get="tasks/add"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='n'] from:#cmd-inp"
                hx-target="#all-dialog-boxes"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">n</span>ew</span>
        </button>
    </div>
    <div class="join">
        <button class="btn btn-xs join-item btn-neutral" id="pending" hx-get="tasks?status=pending"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='p'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">p</span>ending</span>
        </button>
        <button class="btn btn-xs join-item btn-neutral" id="waiting" hx-get="tasks?status=waiting"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='w'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">w</span>aiting</span>
        </button>
        <button class="btn btn-xs join-item btn-neutral" id="completed"
                hx-get="tasks?status=completed"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='c'] from:#cmd-inp"
                hx-target="#list-of-tasks" hx-swap="innerHTML">
            <span><span class="shortcut_key">c</span>ompleted</span>
        </button>
        <button class="btn btn-xs join-item btn-neutral"
                hx-get="tasks?report=all"
                hx-include="[id='filtering']"
                hx-target="#list-of-tasks"
                hx-trigger="click,keyup[{{mod_key}}key=='a'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">a</span>ll</span>
        </button>
    </div>

    <div class="join">
        <button class="btn btn-xs join-item btn-primary" hx-get="tasks?report=next"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='x'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span>ne<span class="shortcut_key">x</span>t</span>
        </button>
        <button class="btn btn-xs join-item btn-primary" hx-get="tasks?report=ready"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='r'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">r</span>eady</span>
        </button>
        <button class="btn btn-xs join-item btn-primary" hx-get="tasks?report=new"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='e'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span>n<span class="shortcut_key">e</span>w</span>
        </button>
    </div>

    <div class="join grow">
        <button class="btn btn-xs join-item btn-neutral" id="priority-h" hx-get="tasks?query=priority:H"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='h'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">H</span></span>
        </button>
        <button class="btn btn-xs join-item btn-neutral" id="priority-m" hx-get="tasks?query=priority:M"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='m'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">M</span></span>
        </button>
        <button class="btn btn-xs join-item btn-neutral" id="priority-l" hx-get="tasks?query=priority:L"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[{{mod_key}}key=='l'] from:#cmd-inp"
                hx-swap="innerHTML">
            <span><span class="shortcut_key">L</span></span>
        </button>
    </div>
    <!-- Other options -->
    <div>
        <button class="btn btn-xs btn-ghost" id="theme-switcher">⚹</button>
    </div>
    <!-- CMD BAR -->
    <div>
        <label class="" for="cmd-inp"></label>
        <input type="search" class="input input-xs input-neutral focus:border-base-100 grow input-ghost border-base-200" placeholder="Cmd Bar, Ctrl+Shift+k" id="cmd-inp"
               autofocus value="" autocomplete="off" />
    </div>
</div>
