Commands
COMMANDS
<section class="rise">
    <h1 class="text-3xl font-medium tracking-tight md:text-4xl">Commands</h1>
</section>

<section class="rise rise-1 mt-6 flex flex-wrap items-center gap-3">
    <label class="ring-card relative flex h-10 flex-1 items-center gap-2 rounded-full bg-card px-3 transition-colors focus-within:bg-background focus-within:ring-2 focus-within:ring-ring/30">
        <svg class="size-4 text-muted-foreground" aria-hidden="true"><use href="#i-search"/></svg>
        <input id="command-filter"
               type="text"
               placeholder="Filter commands, aliases, permissions..."
               class="h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
               autocomplete="off">
    </label>
    <button type="button" id="command-toggle"
            class="ring-card inline-flex h-10 items-center gap-1.5 rounded-full bg-card px-4 text-sm font-medium transition-colors hover:bg-secondary"
            data-state="open">
        Collapse all
    </button>
</section>
<p class="rise rise-1 mt-2 hidden font-mono text-[11px] text-destructive" id="command-empty">No commands match that filter.</p>

<section class="rise rise-2 mt-2">
${commands}
</section>

<script>
    (function () {
        const input = document.getElementById('command-filter');
        const toggle = document.getElementById('command-toggle');
        const empty = document.getElementById('command-empty');
        const sections = Array.from(document.querySelectorAll('.command-section'));

        if (input) {
            input.addEventListener('input', () => {
                const q = input.value.toLowerCase().trim();
                let anyShown = false;
                sections.forEach(section => {
                    const cards = Array.from(section.querySelectorAll('[data-search]'));
                    let shownInSection = 0;
                    cards.forEach(c => {
                        const match = !q || (c.getAttribute('data-search') || '').includes(q);
                        c.style.display = match ? '' : 'none';
                        if (match) shownInSection++;
                    });
                    section.style.display = shownInSection ? '' : 'none';
                    if (q) section.open = shownInSection > 0;
                    if (shownInSection) anyShown = true;
                });
                if (empty) empty.classList.toggle('hidden', anyShown || !q);
            });
        }

        if (toggle) {
            toggle.addEventListener('click', () => {
                const willOpen = toggle.dataset.state !== 'open';
                sections.forEach(s => { s.open = willOpen; });
                toggle.dataset.state = willOpen ? 'open' : 'closed';
                toggle.textContent = willOpen ? 'Collapse all' : 'Expand all';
            });
        }
    })();
</script>