{# Meilisearch-powered search component #}
<div class="admin-search-component"
     data-controller="search"
     data-search-url-value="/admin/api/search"
     data-search-min-chars-value="3"
     data-search-debounce-value="300">

    <div class="search-input-wrapper">
        <input type="text"
               class="form-control search-input"
               placeholder="Rechercher... (Ctrl+K)"
               data-search-target="input"
               data-action="input->search#handleInput"
               autocomplete="off">

        <div class="search-loading d-none" data-search-target="loading">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        </div>
    </div>

    <div class="search-dropdown" data-search-target="dropdown">
        <div class="search-results" data-search-target="results">
            {# Results will be inserted here dynamically #}
        </div>
    </div>
</div>