{# Filter bar fragment.
   Contract: ~/.claude/skills/ux-architect/components/filter-bar.md (UX-033)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-filter-* classes
   (components/fragments.css). Three branches (ref-loaded select, static
   select, text input) all share the .dz-filter-input or .dz-filter-select
   chrome rule. #}
{% set tbody_target = '#' + (table.table_id or 'dt-table') + '-body' %}
<div class="dz-filter-bar">
  {% for col in table.columns %}
  {% if col.filterable %}
  <div class="dz-filter-cell">

    <label class="dz-filter-label">{{ col.label }}</label>

    {% if col.filter_type == "select" and col.filter_ref_entity %}
    {# Ref/belongs_to filter: select with dynamically loaded options.
       #970: previously used `<template x-for="opt in options">` to render
       options reactively. Idiomorph's attribute-morph loop evaluated the
       `:value` / `x-text` bindings on the cloned <option> elements before
       Alpine re-established the x-for scope, throwing
       `Alpine Expression Error: opt is not defined` once per option per
       morph. Same bug class as #963/#964/#968 (Alpine bindings vs htmx
       morph timing).

       Fix: drop x-for. Append plain <option> elements via direct DOM
       manipulation in x-init. The morph then sees ordinary DOM nodes with
       no Alpine attributes — nothing for idiomorph to evaluate
       prematurely. Trade-off: loses reactivity on `options` mutations
       after first paint (filter dropdowns are static after load anyway,
       so this is fine). #}
    <select name="filter[{{ col.key }}]"
            class="dz-filter-select"
            data-ref-api="{{ col.filter_ref_api }}"
            data-selected-value="{{ table.filter_values.get(col.key, '') if table.filter_values else '' }}"
            hx-get="{{ table.api_endpoint }}"
            hx-target="{{ tbody_target }}"
            hx-swap="innerHTML"
            hx-trigger="change"
            hx-include="closest [data-dazzle-table]"
            hx-headers='{"Accept": "text/html"}'
            hx-indicator="#{{ table.table_id or 'dt-table' }}-loading-sr"
            x-init="dzFilterRefSelect($el)">
      <option value="">All</option>
    </select>

    {% elif col.filter_type == "select" %}
    {# Enum/static select filter #}
    <select name="filter[{{ col.key }}]"
            class="dz-filter-select"
            hx-get="{{ table.api_endpoint }}"
            hx-target="{{ tbody_target }}"
            hx-swap="innerHTML"
            hx-trigger="change"
            hx-include="closest [data-dazzle-table]"
            hx-headers='{"Accept": "text/html"}'
            hx-indicator="#{{ table.table_id or 'dt-table' }}-loading-sr">
      <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="dz-filter-input"
           hx-get="{{ table.api_endpoint }}"
           hx-target="{{ tbody_target }}"
           hx-swap="innerHTML"
           hx-trigger="keyup changed delay:300ms"
           hx-include="closest [data-dazzle-table]"
           hx-headers='{"Accept": "text/html"}'
           hx-indicator="#{{ table.table_id or 'dt-table' }}-loading-sr" />
    {% endif %}

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