{#- Every filter at once, in a drawer the Filters button opens over the list.
    It is one form that applies as you pick and reloads only the table, so
    the list stays in view and changes as you go. On a phone it covers the
    screen, with a button at its foot that shows the list again. -#}
{% import "adminsite/_icons.html" as icons %}
{% import "adminsite/_option_count.html" as counts %}
{%- set names = panels|map(attribute="filter.name")|list -%}
{%- set kept = request.query_params.multi_items()|list -%}
{%- set counted = panels|selectattr("counted")|list -%}
{#- The counts beside the options follow the search, and come in a request of
    their own as the drawer opens: again only once the search has changed, so
    a list nobody filters never counts them. -#}
<div id="filters" popover aria-labelledby="filters-heading"
     {% if counted %}hx-get="{{ urls.list(view) }}" hx-trigger="toggle[filterCountsWanted(event)]"
     hx-swap="none" hx-sync="this:replace" data-keeps=""{% endif %}
     class="inset-auto top-2 bottom-2 end-2 m-0 h-auto w-88 max-w-[calc(100vw-1rem)] overflow-hidden rounded-box border border-base-300 bg-base-100 p-0 text-base-content shadow-float max-md:inset-0 max-md:w-full max-md:max-w-none max-md:rounded-none max-md:border-0">
  {% if counted %}<span id="filters-counted" hidden></span>{% endif %}
  {#- A box ticked, a shortcut picked or an end of a range typed applies the
      form; each of those is marked `data-applies`. The box that narrows a
      long list is not, nor is picking "between", which waits for its ends.
      A choice or a shortcut picked again lets its filter go and applies the
      form, a range through its hidden value, which is marked too. A record
      picked or let go applies it as well, and a text filter applies itself
      once the typing stops. -#}
  <form class="flex h-full flex-col" method="get" action="{{ urls.list(view) }}"
        data-keeps="{{ names|join(' ') }}" data-drops-empty
        hx-get="{{ urls.list(view) }}" hx-trigger="change[target.hasAttribute('data-applies')] delay:250ms, picker-change delay:250ms, submit"
        hx-target="#records" hx-swap="outerHTML" hx-push-url="true">
    {% for key, value in kept if key not in names and key not in ("page", "after", "before") %}
      <input type="hidden" name="{{ key }}" value="{{ value }}">
    {% endfor %}
    <div class="flex items-center gap-2 border-b border-line py-2.5 ps-5 pe-2.5">
      <h2 id="filters-heading" class="flex-1 text-[15px] font-semibold">{{ _('Filters') }}</h2>
      <button class="btn btn-ghost btn-sm btn-square text-muted" type="button"
              popovertarget="filters" popovertargetaction="hide"
              aria-label="{{ _('Close the filters') }}">{{ icons.icon("x") }}</button>
    </div>
    <div class="relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-5">
      {% for panel in panels %}
        {% set name = panel.filter.name %}
        {% set one_choice = panel.filter.template == "choice" and not panel.filter.multiple %}
        <div class="border-b border-line py-4 last:border-b-0">
          <fieldset id="filter-{{ name|replace('.', '-') }}"
                    {%- if one_choice %} x-data='oneChoice({{ (panel.chosen[0] if panel.chosen else "")|tojson }})'{% endif %}>
            <legend class="mb-2 text-label font-semibold">{{ panel.filter.label }}</legend>
            {% if panel.filter.template == "choice" %}
              {% set kind = "radio" if one_choice else "checkbox" %}
              {#- A long list gets a box above it that narrows it as you type.
                  The box has no name, so the filter never sends what was typed. -#}
              <div {% if panel.searchable %}x-data="choiceSearch()"{% endif %}>
                {% if panel.searchable %}
                  <label class="input input-sm mb-2 w-full">
                    <span class="text-muted">{{ icons.icon("search") }}</span>
                    <input type="search" class="grow" x-model="query" @keydown.enter.prevent
                           placeholder="{{ _('Search') }}"
                           aria-label="{{ _('Search {things}', things=panel.filter.label|in_sentence) }}">
                  </label>
                {% endif %}
                <div class="relative -mx-2 flex max-h-64 flex-col gap-0.5 overflow-x-hidden overflow-y-auto" {% if panel.searchable %}x-ref="choices"{% endif %}>
                  {% for option in panel.options %}
                    <label class="flex h-8 shrink-0 cursor-pointer items-center gap-2.5 rounded-field px-2 hover:bg-base-200"
                           {% if panel.searchable %}data-label="{{ option.label }}" x-show="shows($el)"{% endif %}>
                      <input type="{{ kind }}" name="{{ name }}" value="{{ option.value }}" data-applies
                             class="{{ kind }} {{ kind }}-sm {{ kind }}-primary"
                             {% if one_choice %}x-model="picked" @click="pickAgain($el, $event)"
                             @keydown.space="pickAgain($el, $event)"{% endif %}
                             {% if option.value in panel.chosen %}checked{% endif %}>
                      <span class="flex-1">{{ option.label }}</span>
                      {% if panel.counted %}{{ counts.slot(name, loop.index, option) }}{% endif %}
                    </label>
                  {% endfor %}
                </div>
                {% if panel.searchable %}
                  <p class="py-2 text-muted" x-show="empty" x-cloak>{{ _('Nothing found.') }}</p>
                {% endif %}
              </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. The
                  shortcuts carry the filter's name, as Alpine would otherwise
                  name every range's shortcuts alike, making them one group. -#}
              {% 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='rangeFilter({{ (current if current in presets else ("custom" if custom else ""))|tojson }}, {{ ends[0]|tojson }}, {{ ends[1]|tojson }})'>
                <input type="hidden" name="{{ name }}" value="{{ current }}" x-ref="sent" :value="value" data-applies>
                {% 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-label has-checked:border-primary has-checked:bg-selected">
                        <input type="radio" name="{{ name }}-shortcut" class="radio radio-xs radio-primary" value="{{ option.value }}"
                               x-model="preset" @click="pickAgain($el, $event)" @keydown.space="pickAgain($el, $event)" data-applies>
                        {{ 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-label has-checked:border-primary has-checked:bg-selected">
                      <input type="radio" name="{{ name }}-shortcut" class="radio radio-xs radio-primary" value="custom"
                             x-model="preset" @click="pickAgain($el, $event)" @keydown.space="pickAgain($el, $event)">
                      {{ _('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-note font-medium text-muted">
                    {{ _('From') }}
                    <input class="input input-sm w-full text-body text-base-content" type="{{ kind }}" data-applies
                           {% if kind == "number" %}step="any"{% endif %} x-model="low" value="{{ ends[0] }}">
                  </label>
                  <label class="flex flex-col gap-1 text-note font-medium text-muted">
                    {{ _('To') }}
                    <input class="input input-sm w-full text-body text-base-content" type="{{ kind }}" data-applies
                           {% if kind == "number" %}step="any"{% endif %} x-model="high" value="{{ ends[1] }}">
                  </label>
                </div>
              </div>
            {% elif panel.picker %}
              {#- The records a relation filter matches, picked by name as on a
                  form: a box that searches them as you type, holding the ones
                  picked as chips. -#}
              {%- set row = panel.picker -%}
              {%- set target = admin.views.for_relation(row.field) -%}
              {%- set things = (target.label_plural if target else row.label)|in_sentence -%}
              {%- set picker_multiple = panel.filter.multiple -%}
              {%- set picker_ordered = false -%}
              {%- set picker_options = none -%}
              {%- set picker_hint = _("Search {things}", things=things) -%}
              {%- set picker_search = picker_hint -%}
              {%- set field_attrs %}aria-label="{{ panel.filter.label }}"{% endset -%}
              {% include "adminsite/widgets/_picker.html" %}
            {% 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|in_sentence }}"
                     hx-get="{{ urls.list(view) }}" hx-trigger="input changed delay:400ms, search"
                     hx-include="closest form" hx-target="#records" hx-swap="outerHTML" hx-push-url="true">
            {% endif %}
          </fieldset>
        </div>
      {% endfor %}
    </div>
    {% include "adminsite/_filters_footer.html" %}
  </form>
</div>