{#- Above the table: the search, the filters, the actions and the columns.
    The Filters button opens every filter at once in a drawer over the list,
    and the filters in use show as chips under the toolbar. -#}
{% import "adminsite/_icons.html" as icons %}
{%- set kept = request.query_params.multi_items()|list -%}
<div class="flex flex-wrap items-center gap-2 px-4 py-3 compact:py-2 lg:px-7">
  {% if view._pages.search_paths(request) %}
    <form class="w-full sm:w-72" method="get" action="{{ urls.list(view) }}" role="search" data-keeps="q"
          hx-get="{{ urls.list(view) }}" hx-target="#records" hx-swap="outerHTML" hx-push-url="true">
      {% for key, value in kept if key not in ("q", "page", "after", "before") %}
        <input type="hidden" name="{{ key }}" value="{{ value }}">
      {% endfor %}
      <label class="input input-sm h-8.5 w-full compact:h-8">
        <span class="text-muted">{{ icons.icon("search") }}</span>
        <input type="search" name="q" value="{{ search }}" class="grow"
               placeholder="{{ _('Search {things}', things=view.label_plural|in_sentence) }}"
               aria-label="{{ _('Search {things}', things=view.label_plural|in_sentence) }}"
               hx-get="{{ urls.list(view) }}" hx-target="#records" hx-swap="outerHTML"
               hx-trigger="input changed delay:300ms, search" hx-include="closest form"
               hx-replace-url="true">
      </label>
    </form>
  {% endif %}

  {% if panels %}
    <button id="filters-button" class="btn btn-plain btn-sm" type="button" popovertarget="filters">
      <span class="text-muted">{{ icons.icon("filter") }}</span>{{ _('Filters') }}
      {% include "adminsite/_filters_count.html" %}
    </button>
  {% endif %}

  <span class="flex-1"></span>
  {% include "adminsite/_bulk_actions.html" %}
  {% include "adminsite/_list_menus.html" %}
  {% include "adminsite/_list_forms.html" %}
</div>
{% include "adminsite/_filter_chips.html" %}
{% if panels %}{% include "adminsite/_filters.html" %}{% endif %}