{% load i18n unfold %}

{% if cl.model_admin.list_filter_submit or cl.is_facets_optional or cl.has_active_filters %}
    <div class="bg-white border-t border-base-200 flex flex-col gap-2 px-3 py-2.5 dark:bg-base-800 dark:border-base-700 {% if not cl.model_admin.list_filter_sheet %}2xl:pb-0 2xl:border-t-0! 2xl:bg-transparent! 2xl:px-0{% endif %}">
        {% if cl.model_admin.list_filter_submit %}
            {% component "unfold/components/button.html" with submit=1 %}
                {% trans "Apply Filters" %}
            {% endcomponent %}
        {% endif %}

        {% if cl.is_facets_optional or cl.has_active_filters %}
            <span id="changelist-filter-extra-actions" class="flex flex-row flex-wrap gap-2 items-center">
                {% if cl.is_facets_optional %}
                    {% if cl.add_facets %}
                        {% component "unfold/components/button.html" with href=cl.remove_facet_link class="hidelink grow" variant="default" %}
                            {% trans "Hide counts" %}
                        {% endcomponent %}
                    {% else %}
                        {% component "unfold/components/button.html" with href=cl.add_facet_link class="viewlink grow" variant="default" %}
                            {% trans "Show counts" %}
                        {% endcomponent %}
                    {% endif %}
                {% endif %}

                {% if cl.has_active_filters %}
                    {% component "unfold/components/button.html" with href=cl.clear_all_filters_qs class="clearall grow" variant="default" %}
                        {% trans "Clear all filters" %}
                    {% endcomponent %}
                {% endif %}
            </span>
        {% endif %}
    </div>
{% endif %}