{% load i18n ocyanjson %}

{% ocyanjson "oscar_elasticsearch" "facet_list_size" 15 as facet_list_size %}

{% with code=data.facet|cut:"." facet_options_count=data.unfiltered_buckets|length %}
<div class="facet-wrapper category-item">
    <span class="facet-header category-header h2" data-bs-toggle="collapse" data-bs-target="#facet_{{ code }}" aria-expanded="true" aria-controls="facet_{{ code }}">
        {{ name }}
    </span>
    <div id="facet_{{ code }}" class="collapse show reverse-md" aria-labelledby="facet_{{ code }}">
        <div class="category-body">
        {% for item in items %}
        {% if facet_options_count > facet_list_size and facet_list_size == forloop.counter0 %}
        <div class="collapse collapsed" id="facet_list_{{ code }}">
        {% endif %}

        <div class="facet_item">
            <div class="form-check">
                {% if item.disabled %}
                <input type="checkbox" class="form-check-input" id="facet_{{ item.key }}" name="{{ item.key }}" disabled >
                <label class="text-muted form-check-label" for="facet_{{ item.key }}">{{ item }} {% if item.show_count %}<small>({{ item.doc_count }})</small>{% endif %}</label>
                {% else %}
                <input class="facet_url" type="hidden" name="url_for_{{ item.key }}" value="{{ item.select_url }}" id="url_facet_{{ item.key }}" >
                <label for="url_facet_{{ item.key }}" hidden></label>
                <input class="form-check-input" type="checkbox" name="{{ item.key }}" {% if item.selected %}checked{% endif %} id="facet_{{ item.key }}" >
                <label class="form-check-label" for="facet_{{ item.key }}">
                    <a rel="nofollow" tabindex="-1" {% if item.selected %}href="{{ item.deselect_url }}"{% else %}href="{{ item.select_url }}"{% endif %} class="stretched-link">
                        {{ item }}
                    </a>
                    {% if item.show_count %}<small>({{ item.doc_count }})</small>{% endif %}
                </label>
                {% endif %}
            </div>
        </div>
        {% if facet_options_count > facet_list_size and forloop.last %}
        </div>
        {% endif %}
        {% endfor %}
        {% if facet_options_count > facet_list_size %}
        <a class="toggle-btn mt-4 collapsed" data-bs-toggle="collapse" data-bs-target="#facet_list_{{ code }}"><i class="mr-2 fa fa-angle-double-down"></i> <span class="more">{% trans 'More' %}</span> <span class="less">{% trans 'Less' %}</span></a>
        {% endif %}
        </div>
    </div>
</div>
{% endwith %}