{#
    Sélecteur recherchable pour un champ de formulaire — réutilise le menu recherchable
    de Planning (filtrage data-project-search-*). Pose un input caché `name`.
    Variables : name, options (list de {id, label}), selected (id|null), placeholder, noneLabel.
#}
{% set selectedLabel = noneLabel|default('—') %}
{% for opt in options %}{% if opt.id == selected %}{% set selectedLabel = opt.label %}{% endif %}{% endfor %}
<details class="sensi-select-menu sensi-select-field" data-project-search-menu data-search-select>
    <summary>
        <span data-search-select-label>{{ selectedLabel }}</span>
        <span class="material-symbols-outlined" aria-hidden="true">expand_more</span>
    </summary>
    <input type="hidden" name="{{ name }}" value="{{ selected|default('') }}" data-search-select-input>
    <div class="sensi-select-menu__panel">
        <div class="sensi-select-menu__search">
            <span class="material-symbols-outlined" aria-hidden="true">search</span>
            <input type="search" placeholder="{{ placeholder|default('Rechercher…') }}" autocomplete="off" data-project-search-input>
        </div>
        <div class="sensi-select-menu__items" data-project-search-items>
            <button type="button" data-project-search-item data-search-value="" data-value="" data-label="{{ noneLabel|default('—') }}">{{ noneLabel|default('—') }}</button>
            {% for opt in options %}
                <button type="button" class="{{ selected == opt.id ? 'is-selected' : '' }}" data-project-search-item data-search-value="{{ opt.label|lower }}" data-value="{{ opt.id }}" data-label="{{ opt.label }}">
                    <span class="material-symbols-outlined" aria-hidden="true">check</span>{{ opt.label }}
                </button>
            {% endfor %}
        </div>
        <p class="sensi-select-menu__empty" data-project-search-empty hidden>Aucun résultat.</p>
    </div>
</details>