{{-- Busca global do topo (desktop). Componente Alpine. Porte idêntico de views/partials/global-search.php. --}}
<div class="gsearch" x-data="globalSearch" @keydown.escape="close()" @click.outside="close()">
    <i class="ic">search</i>
    <input type="text" placeholder="Buscar clientes, projetos, reuniões…"
           x-model="q" @input.debounce.220ms="run()" @focus="run()"
           @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)"
           @keydown.enter.prevent="go()">

    <div class="gsearch-pop" x-show="open" x-cloak>
        <template x-if="loading">
            <div class="none">Buscando…</div>
        </template>
        <template x-if="!loading && flat.length === 0">
            <div class="none" x-text="q.length < 2 ? 'Digite ao menos 2 letras.' : 'Nada encontrado.'"></div>
        </template>
        <template x-for="grp in groups" :key="grp.label">
            <div>
                <div class="grp" x-text="grp.label"></div>
                <template x-for="(it, i) in grp.items" :key="grp.base + it.id">
                    <a :href="grp.base + it.id + (grp.suffix || '')"
                       :class="{ 'is-active': flat[cursor] && flat[cursor].url === (grp.base + it.id + (grp.suffix || '')) }">
                        <i class="ic" x-text="grp.icon"></i>
                        <span class="grow">
                            <span x-text="it.label"></span>
                            <span class="muted small" style="display:block" x-text="it.sub"></span>
                        </span>
                    </a>
                </template>
            </div>
        </template>
    </div>
</div>