{% from "filters/_matchType.html" import render_match_type  %}

<div class="filter-group">
    <label>{{ _("Label") }}</label>
    {{ render_match_type("labels-match-type", filters.selected_labels_match_type)}}

    <div class="multi-select-wrapper"
         data-placeholder="{{ _('All Labels') }}"
         data-single-format="{name}"
         data-multi-format="{{ _('{count} labels selected') }}"
         data-match-type-id="labels-match-type"
         data-searchable="true"
         data-search-placeholder="{{ _('Search labels…') }}"
        >
        <div class="multi-select-header" onclick="toggleMultiSelect(this)">
            <span class="selected-text">{{ _("All Labels") }}</span>
            <span class="arrow">▼</span>
        </div>
        <div class="multi-select-options">
            {% for label in filters.labels %}
            <label class="multi-select-option">
                <input type="checkbox"
                       name="labels"
                       value="{{ label.id }}"
                       data-label="{{ label.name }}"
                       {% if label.id in filters.selected_label_ids %}checked{% endif %}
                       onchange="updateMultiSelectText(this)">
                <span>{{ label.name }}</span>
            </label>
            {% endfor %}
        </div>
    </div>
</div>