{# Filter bar fragment — pure Tailwind, same HTMX wiring and filter logic #}
{% set tbody_target = '#' + (table.table_id or 'dt-table') + '-body' %}
<div class="flex flex-wrap gap-2 items-end">
  {% for col in table.columns %}
  {% if col.filterable %}
  <div class="flex flex-col gap-0.5 w-40">

    <label class="text-[12px] font-medium text-[hsl(var(--muted-foreground))]">
      {{ col.label }}
    </label>

    {% if col.filter_type == "select" and col.filter_ref_entity %}
    {# Ref/belongs_to filter: select with dynamically loaded options #}
    <select name="filter[{{ col.key }}]"
            class="h-8 w-full rounded-[4px] border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 text-[13px] text-[hsl(var(--foreground))] outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] [transition-timing-function:cubic-bezier(0.2,0,0,1)] transition-shadow duration-[120ms]"
            hx-get="{{ table.api_endpoint }}"
            hx-target="{{ tbody_target }}"
            hx-swap="innerHTML"
            hx-trigger="change"
            hx-include="closest [data-dz-table]"
            hx-headers='{"Accept": "text/html"}'
            hx-indicator="#{{ table.table_id or 'dt-table' }}-loading"
            x-data="{ options: [], loading: true }"
            x-init="
              fetch('{{ col.filter_ref_api }}?page_size=200', { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => {
                  const items = data.items || [];
                  const display = (item) => {
                    return item.__display__ || item.name || item.company_name
                      || ((item.first_name || '') + ' ' + (item.last_name || '')).trim()
                      || item.title || item.label || item.email || item.id || '';
                  };
                  options = items.map(i => ({ value: i.id, label: display(i) }));
                  loading = false;
                })
                .catch(() => { loading = false; })
            ">
      <option value="">All</option>
      <template x-for="opt in options" :key="opt.value">
        <option :value="opt.value"
                x-text="opt.label"
                :selected="'{{ table.filter_values.get(col.key, '') if table.filter_values else '' }}' === opt.value">
        </option>
      </template>
    </select>

    {% elif col.filter_type == "select" %}
    {# Enum/static select filter #}
    <select name="filter[{{ col.key }}]"
            class="h-8 w-full rounded-[4px] border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 text-[13px] text-[hsl(var(--foreground))] outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] [transition-timing-function:cubic-bezier(0.2,0,0,1)] transition-shadow duration-[120ms]"
            hx-get="{{ table.api_endpoint }}"
            hx-target="{{ tbody_target }}"
            hx-swap="innerHTML"
            hx-trigger="change"
            hx-include="closest [data-dz-table]"
            hx-headers='{"Accept": "text/html"}'
            hx-indicator="#{{ table.table_id or 'dt-table' }}-loading">
      <option value="">All</option>
      {% for opt in col.filter_options %}
      <option value="{{ opt.value }}"
              {% if table.filter_values and table.filter_values.get(col.key) == opt.value %}selected{% endif %}>
        {{ opt.label }}
      </option>
      {% endfor %}
    </select>

    {% else %}
    {# Text filter #}
    <input type="text"
           name="filter[{{ col.key }}]"
           placeholder="Filter {{ col.label | lower }}…"
           value="{{ table.filter_values.get(col.key, '') if table.filter_values else '' }}"
           class="h-8 w-full rounded-[4px] border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-3 text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] [transition-timing-function:cubic-bezier(0.2,0,0,1)] transition-shadow duration-[120ms]"
           hx-get="{{ table.api_endpoint }}"
           hx-target="{{ tbody_target }}"
           hx-swap="innerHTML"
           hx-trigger="keyup changed delay:300ms"
           hx-include="closest [data-dz-table]"
           hx-headers='{"Accept": "text/html"}'
           hx-indicator="#{{ table.table_id or 'dt-table' }}-loading" />
    {% endif %}

  </div>
  {% endif %}
  {% endfor %}
</div>