{% from "admin/components/ui/combobox.html" import combobox %}
{% from "admin/components/icons.html" import icon %}
{# Filter drawer: one "Filters" trigger in the toolbar plus a sheet
   that slides in from the right listing every declared filter. One
   trigger stays one trigger however many filters a ModelAdmin
   declares, and vertical space in a drawer is free in a way horizontal
   space in a toolbar is not.

   Each choice is a link, not a form control, so filtering works with JS
   off and the URLs are the real navigation. The precomputed URLs keep
   query-string assembly out of the template.

   Reset lives in the footer rather than the toolbar: it clears search
   *and* every filter, so it belongs with the things it clears.

   The open flag is mirrored onto a window global so it survives htmx's
   outerHTML swap of #resource-list -- applying a filter re-renders this
   component, and the drawer would otherwise slam shut on every click.
   It is read back at init, so a fresh page load still starts closed.

   Included, not a macro, so it shares list_content.html's ambient
   context (filter_controls, active_filter_count, has_active_filters,
   reset_url). #}
{% if filter_controls %}
<div x-data="{ open: window.polyadminFiltersOpen === true }"
     x-effect="window.polyadminFiltersOpen = open"
     @keydown.escape.window="open = false"
     class="{{ ui('toolbar', 'item') }}">
  <button type="button" @click="open = !open"
          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="dialog"
          class="{{ ui('button', 'outline', 'size-sm') }} {{ ui('toolbar', 'item') }}">
    {{ icon("filter", "size-4 shrink-0 " ~ ui('toolbar', 'item-icon')) }}
    <span class="{{ ui('toolbar', 'item-label') }}">{{ _("Filters") }}</span>
    {% if active_filter_count %}
    <span class="{{ ui('separator', 'vertical') }} mx-1 !h-4"></span>
    <span class="{{ ui('badge', 'secondary') }} {{ ui('filter-panel', 'count') }}">{{ active_filter_count }}</span>
    {% endif %}
  </button>

  <div x-show="open" x-cloak @click="open = false"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
       class="{{ ui('sheet', 'overlay') }}"></div>

  {# x-trap is what makes aria-modal="true" true: without it the drawer
     claims to be modal while Tab walks straight out into the page
     behind the overlay. It also moves focus into the panel on open and
     back to the trigger on close. #}
  <div x-show="open" x-cloak x-trap="open" role="dialog" aria-modal="true" aria-label="{{ _('Filters') }}"
       x-transition:enter="transition ease-in-out duration-300"
       x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in-out duration-300"
       x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
       class="{{ ui('sheet', 'content') }} {{ ui('sheet', 'side-right') }} {{ ui('sheet', 'panel') }}
              {{ ui('sheet', 'width-panel') }} flex flex-col">
    <div class="{{ ui('filter-panel', 'header') }}">
      <h2 class="{{ ui('filter-panel', 'title') }}">{{ _("Filters") }}</h2>
      <button type="button" @click="open = false" aria-label="{{ _('Close filters') }}"
              class="{{ ui('button', 'ghost-muted', 'size-icon-sm') }}">
        {{ icon("close", "size-4") }}
      </button>
    </div>

    <div class="{{ ui('filter-panel', 'body') }}">
      {% for control in filter_controls %}
      <div>
        <h3 class="{{ ui('filter-panel', 'group-label') }}">{{ _(control.label) }}</h3>
        <ul>
          {% for choice in control.choices %}
          <li>
            <a href="{{ choice.url }}"
               hx-get="{{ choice.url }}" hx-target="#resource-list" hx-select="#resource-list"
               hx-swap="outerHTML" hx-push-url="true"
               class="{{ ui('filter-panel', 'choice') }}
                      {% if choice.selected %}{{ ui('filter-panel', 'choice-active') }}{% else %}{{ ui('filter-panel', 'choice-inactive') }}{% endif %}">
              <span class="flex size-4 shrink-0 items-center justify-center">
                {% if choice.selected %}{{ icon("check", "size-4") }}{% endif %}</span>
              <span class="truncate">{{ _(choice.label) }}</span>
            </a>
          </li>
          {% endfor %}
        </ul>
        {% if control.uses_combobox %}
        {# The same control the form uses, in the same GET form the range
           uses: the combobox writes the chosen pk into its own hidden
           input, and Apply submits the form, so the panel needs no
           bespoke navigation. #}
        {# hx-disinherit: the combobox inside carries its own complete htmx
           wiring for /lookup, and without this it would inherit this
           form's hx-select="#resource-list" -- htmx would then select that
           id out of the lookup's option list, find nothing, and swap
           nothing, leaving the panel's combobox permanently empty. #}
        <form method="get" action="{{ control.form_action }}" class="{{ ui('filter-panel', 'form') }}"
              hx-get="{{ control.form_action }}" hx-target="#resource-list" hx-select="#resource-list"
              hx-swap="outerHTML" hx-push-url="true" hx-disinherit="*">
          {% for field in control.hidden %}
          <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
          {% endfor %}
          {{ combobox(name="filter[" ~ control.name ~ "]",
                      id="filter-combobox-" ~ control.name,
                      selected_pk=control.selected_pk,
                      selected_label=control.selected_label,
                      lookup_url=control.lookup_url,
                      placeholder=_('Search…')) }}
          <button type="submit" class="{{ ui('button', 'outline', 'size-xs') }} w-full">{{ _("Apply") }}</button>
        </form>
        {% endif %}
        {% if control.kind == "daterange" %}
        {# A GET form, not a JS-built URL: two date inputs cannot become
           one parameter without either a form post or scripting, and the
           form is the one that still works with scripting off. The route
           folds _range_from/_range_to into the filter's own value
           (fold_range_params). #}
        <form method="get" action="{{ control.form_action }}" class="{{ ui('filter-panel', 'form') }}"
              hx-get="{{ control.form_action }}" hx-target="#resource-list" hx-select="#resource-list"
              hx-swap="outerHTML" hx-push-url="true">
          {% for field in control.hidden %}
          <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
          {% endfor %}
          <input type="hidden" name="{{ range_for_field }}" value="{{ control.name }}">
          <p class="{{ ui('filter-panel', 'group-label') }}">{{ _("Custom range") }}</p>
          <div class="{{ ui('filter-panel', 'form-row') }}">
            <label for="range-from-{{ control.name }}" class="{{ ui('filter-panel', 'form-label') }}">{{ _("From") }}</label>
            <input type="date" id="range-from-{{ control.name }}" name="{{ range_from_field }}"
                   value="{{ control.range_from }}"
                   class="{{ ui('input') }} {{ ui('filter-panel', 'form-input') }}">
          </div>
          <div class="{{ ui('filter-panel', 'form-row') }}">
            <label for="range-to-{{ control.name }}" class="{{ ui('filter-panel', 'form-label') }}">{{ _("To") }}</label>
            <input type="date" id="range-to-{{ control.name }}" name="{{ range_to_field }}"
                   value="{{ control.range_to }}"
                   class="{{ ui('input') }} {{ ui('filter-panel', 'form-input') }}">
          </div>
          <button type="submit" class="{{ ui('button', 'outline', 'size-xs') }} w-full">{{ _("Apply") }}</button>
        </form>
        {% endif %}
      </div>
      {% endfor %}
    </div>

    {% if has_active_filters %}
    <div class="{{ ui('filter-panel', 'footer') }}">
      <a href="{{ reset_url }}"
         hx-get="{{ reset_url }}" hx-target="#resource-list" hx-select="#resource-list"
         hx-swap="outerHTML" hx-push-url="true"
         class="{{ ui('button', 'ghost-muted', 'size-sm') }} w-full">
        {{ icon("close", "size-4") }} {{ _("Clear all") }}
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endif %}