{% load i18n %}

<div class="py-12 px-16 flex items-start gap-8">
    <ul class="flex lg:flex-wrap gap-8 pt-4 flex-1 min-w-0 max-md:overflow-x-auto custom-scrollbar filters-list">
        {% for filter_field in filters %}
            <li class="filter-wrapper relative max-md:flex-shrink-0{% if not all_filters_visible %} hidden{% endif %}"
                 data-filter-input-name="{{ filter_field.filter_widget.input_name }}" {% if all_filters_visible %}data-all-filters-visible{% endif %}
                 id="{{ filter_field.filter_widget.input_id }}-wrapper">
                <button
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        {% if filter_field.filter_widget.close_dropdown_on_change %}data-sbadmin-close-on-change="1"{% endif %}
                        class="js-filter-dropdown-button empty {% if default_button %}btn{% else %}filter-dropdown-button{% endif %}">
                    <span>
                       {{ filter_field.title|capfirst }}: <span
                            id="{{ filter_field.filter_widget.input_id }}-value">{{ filter_field.filter_widget.get_default_label|default_if_none:"" }}</span>
                    </span>
                    <svg class="w-16 h-16" title="{% trans 'Remove' %}" onclick="window.SBAdminTable['{{ view_id }}'].moduleInstances.filterModule.clearFilter('{{ filter_field.filter_field }}')">
                        <use xlink:href="#Close-small"></use>
                    </svg>
                    <svg class="w-16 h-16 ml-4">
                        <use xlink:href="#Down"></use>
                    </svg>
                </button>
                {% include filter_field.filter_widget.template_name with filter_widget=filter_field.filter_widget %}
            </li>
        {% endfor %}
        {% if not all_filters_visible %}
            <li class="relative max-md:-order-1">
                <button
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        class="btn btn-small rounded-full bg-dark-100 shadow-none">
                    <span>
                       {% trans 'Add' %}
                    </span>
                    <svg class="w-16 h-16 ml-4">
                        <use xlink:href="#Plus"></use>
                    </svg>
                </button>
                <div class="dropdown-menu">
                    <ul>
                        {% for filter_field in filters %}
                            <li>
                                <button type="button"
                                    onclick="window.SBAdminTable['{{ view_id }}'].moduleInstances.filterModule.showFilter('{{ filter_field.filter_field }}')"
                                        class="w-full dropdown-menu-link">{{ filter_field.title }}</button>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </li>
        {% endif %}
    </ul>
    {% if show_full_text_search %}
        <div class="relative flex-shrink-0 ml-auto">
            {% include 'sb_admin/actions/partials/full_text_search.html' with input_classes='w-192 md:w-280 xl:w-320' %}
        </div>
    {% endif %}
    {% block filters_toolbar_after_search %}{% endblock %}
</div>