{% load i18n admin_list unfold unfold_list %}

{% with vertical_filters=cl|unfold_vertical_filters %}
    {% if cl.has_filters and vertical_filters|length > 0 %}
        <div id="changelist-filter" class="backdrop-blur-xs bg-base-900/80 flex inset-0 z-60 fixed {% if not cl.model_admin.list_filter_sheet %}2xl:bg-transparent 2xl:relative 2xl:block! 2xl:z-10{% endif %}" hx-preserve x-show="filterOpen">
            <div id="changelist-filter-close" class="grow {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = false"></div>

            <div class="bg-white flex m-4 overflow-hidden rounded-default shadow-xs w-80 dark:bg-base-800 {% if not cl.model_admin.list_filter_sheet %} 2xl:overflow-visible 2xl:border-0 2xl:shadow-none 2xl:sticky 2xl:top-4 2xl:dark:border-base-800 2xl:bg-transparent 2xl:dark:bg-transparent! 2xl:m-0{% endif %}">
                <div class="grow h-full overflow-auto relative {% if not cl.model_admin.list_filter_sheet %} 2xl:overflow-visible{% endif %}">
                    <{% if cl.model_admin.list_filter_submit %}form id="filter-form" method="get"{% else %}div{% endif %} class="flex flex-col h-full {% if not cl.model_admin.list_filter_sheet %}2xl:px-0{% endif %}">
                    {% if cl.model_admin.list_filter_submit %}
                        {% preserve_filters %}
                    {% endif %}

                    <div class="flex flex-col grow gap-4 overflow-auto *:mb-0" data-simplebar data-simplebar-direction="rtl">
                        <div class="flex flex-col gap-4 px-3 py-2.5 {% if not cl.model_admin.list_filter_sheet %}2xl:pb-1 2xl:px-0 2xl:py-0{% endif %} *:mb-0">
                            {% for spec in vertical_filters %}
                                {% unfold_admin_list_filter cl spec %}
                            {% endfor %}
                        </div>
                    </div>

                    {% include "unfold/helpers/change_list_filter_actions.html" %}
                </{% if cl.model_admin.list_filter_submit %}form{% else %}div{% endif %}>
            </div>
        </div>
        </div>
    {% endif %}
{% endwith %}