{% spaceless %}
<div class="row align-items-center my-2">
    <div class="col-sm-4 d-flex align-items-center">
        <label aria-label="Search" class="flex-grow-1">
            <input id="list-search" name="search" type="search" class="col-12 form-control form-control-md" placeholder="Search">
        </label>
    </div>
    <div class="col-sm-8">
        <ul class="filter-list nav">
            {% for title, spec, selected in filters %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"
                       role="button"
                       data-bs-toggle="dropdown"
                       aria-expanded="false"
                       href="#0"
                    >
                        <div class="filter-name">{{ title|capfirst }}</div>
                        <small class="filter-selected text-muted">{{ selected|truncatechars:20 }}</small>
                    </a>
                    <ul class="dropdown-menu">
                        {% for choice in spec %}
                            <li>
                                <a class="dropdown-item {% if choice.selected %}active{% endif %}"
                                   href="#0" data-filter="{{ choice.query_string }}">
                                    {{ choice.display|escape|truncatechars:50 }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endfor %}
            <li class="nav-item flex-grow-1">
                &nbsp;
            </li>
            <li class="nav-item d-flex align-items-center">
                <div class="filter-counts">
                    <span>{{ paginator.count }} item{{ paginator.count|pluralize }}</span>
                    {% if has_filters %}
                        <a href="." data-toggle="tooltip" title="Clear filters" class="clear-filters">
                        <svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" class="filter-icon"
                              fill="none"  stroke="currentColor"  stroke-width="1.5"  stroke-linecap="round"
                              stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227" />
                            <path d="M3 3l18 18" />
                        </svg>
                        </a>
                    {% endif %}
                </div>
            </li>
        </ul>
    </div>
</div>
{% endspaceless %}
<style>
    .filter-list .filter-name {
        font-size: 0.9em;
        line-height: 0.9;
    }
    .filter-list svg.filter-icon {
        width: 1.5em;
    }
    .filter-list .nav-link {
        padding: 0 1em 0 0;
        display: block;
    }

    .filter-list .filter-counts {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .filter-list .filter-counts > *  {
        padding: 0 1em;
    }
    .filter-list .filter-counts > * + * {
        border-left: 1px solid rgba(0, 0, 0, 0.175);
        padding-right: 0.5em;
    }

    .filter-list .filter-selected {
        line-height: 0.9;
    }

    .filter-list .dropdown-menu {
        min-width: 10rem;
        font-size: 0.9em;
        max-height: 60vh;
        overflow-y: auto;
        max-width: 50vw;
        overflow-x: hidden;
    }
</style>
<script>
    // Function to Perform search by updating search parameter to keep existing filters
    document.addEventListener("DOMContentLoaded", function () {
        const searchBox = document.getElementById('list-search');
        const urlParams = new URLSearchParams(window.location.search);
        const searchValue = urlParams.get('search') || '';
        if (searchBox) {
            searchBox.addEventListener('keypress', updateParam);
            searchBox.value = decodeURIComponent(searchValue);
        }

        // Handle data-filter click events
        document.querySelectorAll('[data-filter]').forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.stopPropagation();
                window.location.href = el.getAttribute('data-filter');

            });
        });
    });

    function updateParam(e) {
        if (e.which === 10 || e.which === 13) {
            e.preventDefault();
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('search', e.target.value);
            window.location.search = urlParams.toString();
        }
    }
</script>
