{#- Above the table: the search, one chip per filter, and the columns. Each
    filter opens a small form of its own, which carries the rest of the query
    along, so applying one filter never drops another. -#}
{% 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 lg:px-7">
  {% if view.get_search_fields(request) %}
    <form class="w-full sm:w-72" method="get" action="{{ urls.list(view) }}" role="search"
          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">
        <span class="text-muted">{{ icons.icon("search") }}</span>
        <input type="search" name="q" value="{{ search }}" class="grow"
               placeholder="{{ _('Search {things}', things=view.label_plural|lower) }}"
               aria-label="{{ _('Search {things}', things=view.label_plural|lower) }}"
               hx-get="{{ urls.list(view) }}" hx-target="#records" hx-swap="outerHTML"
               hx-trigger="keyup changed delay:300ms, search" hx-include="closest form"
               hx-replace-url="true">
      </label>
    </form>
  {% endif %}

  {% if panels %}
    <span class="mx-1 hidden h-5 w-px bg-base-300 sm:block" aria-hidden="true"></span>
    {% for panel in panels %}
      {% set name = panel.filter.name %}
      {% set panel_id = "filter-" ~ name|replace(".", "-") %}
      {% set remove = urls.here(**{name: None, "page": None, "after": None, "before": None}) %}
      <div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
        {% if panel.active %}
          <div 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"
                    @click="open = !open" :aria-expanded="open.toString()" aria-expanded="false"
                    aria-controls="{{ 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="{{ remove }}" aria-label="{{ _('Remove this filter') }}">{{ icons.icon("x", 14) }}</a>
          </div>
        {% else %}
          <button class="inline-flex h-7.5 items-center gap-1 rounded-full border border-dashed border-line-strong ps-2.5 pe-3 text-[13px] font-medium text-muted hover:border-base-content/40 hover:text-base-content"
                  type="button" @click="open = !open" :aria-expanded="open.toString()" aria-expanded="false"
                  aria-controls="{{ panel_id }}">
            {{ icons.icon("plus", 14) }}{{ panel.filter.label }}
          </button>
        {% endif %}

        <form id="{{ panel_id }}" method="get" action="{{ urls.list(view) }}" x-show="open" x-cloak
              class="absolute start-0 top-full z-30 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-box border border-base-300 bg-base-100 p-4 shadow-float">
          {% for key, value in kept if key not in (name, "page", "after", "before") %}
            <input type="hidden" name="{{ key }}" value="{{ value }}">
          {% endfor %}
          <fieldset>
            <legend class="mb-3 text-sm font-semibold">{{ panel.filter.label }}</legend>
            {% if panel.filter.template == "choice" %}
              {% set kind = "checkbox" if panel.filter.multiple else "radio" %}
              <div class="-mx-2 flex max-h-64 flex-col gap-0.5 overflow-y-auto">
                {% for option in panel.options %}
                  <label class="flex h-8 cursor-pointer items-center gap-2.5 rounded-field px-2 hover:bg-base-200">
                    <input type="{{ kind }}" name="{{ name }}" value="{{ option.value }}"
                           class="{{ kind }} {{ kind }}-sm {{ kind }}-primary"
                           {% if option.value in panel.chosen %}checked{% endif %}>
                    <span class="flex-1">{{ option.label }}</span>
                    {% if option.count is not none %}
                      <span class="text-xs tabular-nums text-muted">{{ option.count }}</span>
                    {% endif %}
                  </label>
                {% endfor %}
              </div>
            {% elif panel.filter.template == "range" %}
              {#- A shortcut, or a value at each end. What is sent is one value,
                  the shortcut's name or the two ends joined by a comma. -#}
              {% set current = panel.chosen[0] if panel.chosen else "" %}
              {% set presets = panel.options|map(attribute="value")|list %}
              {% set custom = current and current not in presets %}
              {% set ends = (current.split(",") if custom else []) + ["", ""] %}
              {% set kind = panel.filter.input_type|default("text") %}
              <div x-data='{ preset: {{ (current if current in presets else ("custom" if custom else ""))|tojson }}, low: {{ ends[0]|tojson }}, high: {{ ends[1]|tojson }} }'>
                <input type="hidden" name="{{ name }}"
                       :value="preset && preset !== 'custom' ? preset : ((low || high) ? low + ',' + high : '')">
                {% if panel.options %}
                  <div class="mb-3 grid grid-cols-2 gap-1.5">
                    {% for option in panel.options %}
                      <label class="flex h-8 cursor-pointer items-center gap-2 rounded-field border border-base-300 px-2.5 text-[13px] has-checked:border-primary has-checked:bg-selected">
                        <input type="radio" class="radio radio-xs radio-primary" value="{{ option.value }}" x-model="preset">
                        {{ option.label }}
                      </label>
                    {% endfor %}
                    <label class="col-span-2 flex h-8 cursor-pointer items-center gap-2 rounded-field border border-base-300 px-2.5 text-[13px] has-checked:border-primary has-checked:bg-selected">
                      <input type="radio" class="radio radio-xs radio-primary" value="custom" x-model="preset">
                      {{ _('Between two dates') if kind == "date" else _('Between two values') }}
                    </label>
                  </div>
                {% endif %}
                <div class="grid grid-cols-2 gap-2.5" {% if panel.options %}x-show="preset === 'custom'"{% endif %}>
                  <label class="flex flex-col gap-1 text-xs font-medium text-muted">
                    {{ _('From') }}
                    <input class="input input-sm w-full text-sm text-base-content" type="{{ kind }}"
                           {% if kind == "number" %}step="any"{% endif %} x-model="low" value="{{ ends[0] }}">
                  </label>
                  <label class="flex flex-col gap-1 text-xs font-medium text-muted">
                    {{ _('To') }}
                    <input class="input input-sm w-full text-sm text-base-content" type="{{ kind }}"
                           {% if kind == "number" %}step="any"{% endif %} x-model="high" value="{{ ends[1] }}">
                  </label>
                </div>
              </div>
            {% else %}
              <input class="input input-sm w-full" type="text" name="{{ name }}"
                     value="{{ panel.chosen[0] if panel.chosen else '' }}"
                     aria-label="{{ panel.filter.label }}" placeholder="{{ panel.filter.label|lower }}">
            {% endif %}
          </fieldset>
          <div class="mt-4 flex items-center justify-end gap-2">
            {% if panel.active %}
              <a class="btn btn-ghost btn-sm" href="{{ remove }}">{{ _('Clear') }}</a>
            {% endif %}
            <button class="btn btn-primary btn-sm" type="submit">{{ _('Apply') }}</button>
          </div>
        </form>
      </div>
    {% endfor %}
    {% if chips %}
      <a class="px-1 text-[13px] font-medium text-muted underline underline-offset-3 hover:text-base-content"
         href="{{ urls.list(view) }}">{{ _('Clear all') }}</a>
    {% endif %}
  {% endif %}

  <span class="flex-1"></span>
  {% include "adminsite/_list_menus.html" %}
  {% include "adminsite/_list_forms.html" %}
</div>