{% load debusine %}
<div class="d-flex">
    <div class="dropdown">
        <button class="btn btn-light dropdown-toggle"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false">
            {% if not filters.active %}Table filters{% endif %}
            <i class="bi bi-funnel" title="Add filter"></i>
        </button>
        <ul class="dropdown-menu" id="filters-list-{{ f.filter_prefix }}">
            {% for f in filters.available %}
                <li>{% widget f.menu_entry %}</li>
            {% endfor %}
            <li>
                <hr class="dropdown-divider">
            </li>
            <li>
                <a class="dropdown-item" href="?{{ column.filters.qs_clear_filters }}">Reset filters</a>
            </li>
        </ul>
    </div>
    <div class="d-flex flex-grow-1" id="filters-{{ filters.filter_prefix }}">
        <div class="collapse show align-self-center flex-grow-1"
             id="filters-current-{{ filters.filter_prefix }}"
             data-bs-parent="#filters-{{ filters.filter_prefix }}">
            {% for f in filters.active %}
                {% widget f.active_entry %}
            {% endfor %}
        </div>
        {% for f in filters.available %}
            {% if f.form %}
                <div class="collapse collapse-horizontal align-self-center flex-grow-1"
                     id="filters-form-{{ f.filter_prefix }}"
                     data-bs-parent="#filters-{{ filters.filter_prefix }}">
                    <form class="d-flex table-filter-form" method="get">
                        {% for k, v in f.base_filter_args %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endfor %}
                        <div class="align-self-center ms-2 flex-grow-1">{% widget f.form %}</div>
                        <button class="btn btn-sm btn-primary align-self-center ms-2" type="submit">Add filter</button>
                        <a class="btn btn-sm btn-secondary align-self-center ms-1"
                           data-bs-toggle="collapse"
                           href="#filters-current-{{ filters.filter_prefix }}"
                           aria-expanded="false"
                           aria-controls="filters-current-{{ filters.filter_prefix }}">Cancel</a>
                    </form>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="dropdown">
        <button class="btn btn-light dropdown-toggle"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false">{{ filters.table.orderings.current.label_what }}</button>
        <ul class="dropdown-menu dropdown-menu-end"
            id="order-list-what-{{ filters.table.prefix }}">
            {% for o in filters.table.orderings.what_menu_entries %}<li>{{ o }}</li>{% endfor %}
        </ul>
    </div>
    <div class="btn-group">
        {{ filters.table.orderings.how_sort_icon }}
        <div class="dropdown">
            <button class="btn btn-light dropdown-toggle dropdown-toggle-split"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                <span class="visually-hidden">Toggle ordering options menu</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end"
                id="order-list-how-{{ filters.table.prefix }}">
                {% for o in filters.table.orderings.how_menu_entries %}<li>{{ o }}</li>{% endfor %}
            </ul>
        </div>
    </div>
</div>
