{% for filter in _plugins.searchsortfilter.filters|default([]) %}
    {% if filter.union %}
        <div class="col-auto">
            <select id="filter-{{ filter.id }}" class="form-select form-select-sm" onchange="searchsortfilter();">
                <option selected value="*">{{ filter.name }}</option>
                {% for item in filter.union|localesort %}
                    <option value="{{ item }}">• {{ item }}</option>
                {% endfor %}
            </select>
        </div>
    {% endif %}
{% endfor %}

{% if _plugins.searchsortfilter.search %}
    <div class="col-4">
        <input
            id="search"
            class="form-control form-control-sm"
            type="text"
            placeholder="Rechercher..."
            >
    </div>
    <script>
        const filterkeys = [{% for filter in _plugins.searchsortfilter.filters %}'{{ filter.key }}'{% if not loop.last %}, {% endif %}{% endfor %}];
        const pagefindBundlePath = "{{ "/pagefind"|url }}/";
    </script>
{% endif %}

{% if _plugins.searchsortfilter.sort|length > 1 %}
<div class="col-auto">
    Trier par :
</div>
<div class="col-auto">
    <select id="sort" class="form-select form-select-sm" onchange="searchsortfilter();">
        {% for item in _plugins.searchsortfilter.sort %}
        <option
            {% if loop.first %}selected{% endif %}
            value="{{ item.id }}"
            data-order="{% if item.reverse %}desc{% else %}asc{% endif %}"
            >{{ item.name }}</option>
        {% endfor %}
    </select>
</div>
{% endif %}

{% if _plugins.searchsortfilter %}
    <script src="{{ "/searchsortfilter/searchsortfilter.js"|url }}"></script>
{% endif %}