{#- The filters in use, as chips under the toolbar. A chip opens the filters
    drawer at its filter, and its cross takes the filter off. The table sends
    the row again with every reload, so it never goes stale. -#}
{% import "adminsite/_icons.html" as icons %}
<div id="filter-chips" class="flex flex-wrap items-center gap-2 px-4 pb-3 empty:hidden lg:px-7"
     {% if oob|default(false) %}hx-swap-oob="true"{% endif %}>
  {%- if chips %}
    {% for panel in chips %}
      {% set name = panel.filter.name %}
      {% set panel_id = "filter-" ~ name|replace(".", "-") %}
      <span class="inline-flex h-7.5 items-center rounded-full border border-primary/25 bg-primary/10 text-primary">
        <button class="h-full ps-3 pe-1 text-[13px] font-medium" type="button"
                aria-expanded="false" aria-controls="filters"
                onclick="openFilters('{{ panel_id }}')">{{ panel.chip }}</button>
        <a class="me-0.5 inline-flex size-6.5 items-center justify-center rounded-full hover:bg-primary/15"
           href="{{ urls.here(**{name: None, 'page': None, 'after': None, 'before': None}) }}"
           aria-label="{{ _('Remove this filter') }}">{{ icons.icon("x", 14) }}</a>
      </span>
    {% endfor %}
    {#- Every filter off, the search, the sort and the columns kept. -#}
    {% set cleared = {"page": None, "after": None, "before": None} %}
    {% for panel in panels %}{% set ignored = cleared.update({panel.filter.name: None}) %}{% endfor %}
    <a class="px-1 text-[13px] font-medium text-muted underline underline-offset-3 hover:text-base-content"
       href="{{ urls.here(**cleared) }}">{{ _('Clear all') }}</a>
  {% endif -%}
</div>