{% load debusine %}
<div class="d-flex bg-light p-2">
    {% if filters %}
        {# Filtering and ordering container #}
        <div class="d-flex flex-grow-1 border">
            {# Filtering container #}
            {# Filters menu #}
            <button class="btn btn-light dropdown-toggle debusine-dropdown-remote"
                    type="button"
                    data-bs-target="#{{ filters.dom_id }}-menu"
                    aria-expanded="false">
                <i class="bi bi-funnel" title="Add filter"></i>
            </button>
            <div class="d-flex flex-grow-1 align-items-center p-1 border-start">
                {# Active filters #}
                {% for f in filters.active %}
                    {% widget f.main_entry %}
                {% endfor %}
                <div class="dropdown">
                    {# Dropdown anchor for filters menu #}
                    <div id="{{ filters.dom_id_filters_menu }}"
                         data-bs-toggle='dropdown'
                         aria-expanded='false'></div>
                    <ul class="dropdown-menu">
                        <li>
                            <h6 class="dropdown-header">Add filter on field…</h6>
                        </li>
                        {% for f in filters.available %}
                            <li>{% widget f.menu_entry %}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% for f in filters.inactive %}
                    {# Hidden filter form dropdowns #}
                    {% widget f.main_entry %}
                {% endfor %}
                <div class="flex-grow-1 dropdown text-secondary debusine-dropdown-remote"
                     data-bs-target="#{{ filters.dom_id_filters_menu }}">Filter results...</div>
                {% if filters.active %}
                    <a class="text-decoration-none text-secondary"
                       href="?{{ filters.qs_clear_filters }}"
                       title="Reset filters"><i class="bi bi-x-circle"></i></a>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="d-flex flex-grow-1"></div>
    {% endif %}
    <div class="dropdown">
        {# What to order #}
        <button class="btn btn-light dropdown-toggle"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false">{{ table.orderings.current.label_what }}</button>
        <ul class="dropdown-menu dropdown-menu-end"
            id="{{ table.orderings.dom_id }}-menu-what">
            {% for o in table.orderings.what_menu_entries %}<li>{{ o }}</li>{% endfor %}
        </ul>
    </div>
    <div class="btn-group">
        {# How to order #}
        {{ 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="{{ table.orderings.dom_id }}-menu-how">
                {% for o in table.orderings.how_menu_entries %}<li>{{ o }}</li>{% endfor %}
            </ul>
        </div>
    </div>
</div>
<script type="module">
    import { DebusineRemoteDropdown, DebusineCloseDropdown } from "debusine";
    DebusineRemoteDropdown.setup_all();
    DebusineCloseDropdown.setup_all();
</script>
