{#
  Shared filter-bar element. Rendered both inline in the toolbar and standalone
  in filters.html, and re-rendered on its own for HTMX out-of-band swaps so that
  faceted option lists can refresh against the current filter/search subset.

  Context vars:
    fb        — the GridViewFilters block (schema/state/auto_apply/facets/fragment_*)
    host      — render host (translate)
    fb_search — optional {param, value} → emits a hidden search input (toolbar use)
    fb_oob    — when truthy, marks the element for HTMX outerHTML out-of-band swap
#}
<div class="cm-filter-bar" id="cm-fbar-{{ fb.id | e }}" data-cm-filter-bar{% if fb.auto_apply %} data-auto-apply="1"{% endif %}{% if not fb.navigate_on_change %} data-navigate-on-change="0"{% endif %}{% if fb.facets %} data-cm-facets="1"{% endif %}{% if fb.fragment_endpoint %} data-cm-fragment-endpoint="{{ fb.fragment_endpoint | e }}" data-cm-fragment-target="{{ fb.fragment_target | e }}" data-cm-fragment-swap="{{ fb.fragment_swap | e }}"{% endif %}{% if fb_oob %} hx-swap-oob="outerHTML"{% endif %}>
  {% if fb_search %}
  <input type="hidden" data-cm-search name="{{ fb_search.param | e }}" value="{{ fb_search.value | e }}">
  {% endif %}
  {% macro render_option(option, selected, depth=0) -%}
  <label class="cm-multiselect-option{% if option.disabled %} cm-multiselect-option--disabled{% endif %}"{% if depth %} style="--cm-filter-option-depth: {{ depth }}"{% endif %}>
    <input type="checkbox" value="{{ option.value | e }}" data-label="{{ option.label | e }}"
      {% if option.exclusive %}data-exclusive-solo="1"{% endif %}
      {% if option.count is not none %}data-cm-facet-count="{{ option.count }}"{% endif %}
      {% if option.disabled %}disabled{% endif %}
      {% if option.value in selected %}checked{% endif %}>
    <span class="cm-multiselect-option__label">{{ option.label | e }}</span>
    {% if option.count is not none %}<span class="cm-multiselect-option__count">{{ option.count }}</span>{% endif %}
  </label>
  {% for child in option.children %}{{ render_option(child, selected, depth + 1) }}{% endfor %}
  {%- endmacro %}
  {% for filter in fb.schema %}
  {% set selected = fb.state.values.get(filter.param, ()) if fb.state else () %}
  {% if filter.type == 'grouped_select' %}
  <section class="cm-filter-grouped-select" data-cm-filter-search-item data-filter-id="{{ filter.id | e }}" data-filter-param="{{ filter.param | e }}" data-filter-type="{{ filter.type | e }}" data-filter-scope="{{ filter.scope | e }}">
    <span class="cm-filter-grouped-select__label">{{ filter.label | e }}</span>
    {% for group in filter.options if group.children %}
    <label class="cm-filter-grouped-select__group">
      <span class="cm-filter-grouped-select__group-label">{{ group.label | e }}</span>
      <select name="{{ filter.param | e }}" data-filter-id="{{ filter.id | e }}" data-cm-grouped-select>
        {% for option in group.children %}
        <option value="{{ option.value | e }}"{% if option.disabled %} disabled{% endif %}{% if option.value in selected %} selected{% endif %}>{{ option.label | e }}</option>
        {% endfor %}
      </select>
    </label>
    {% endfor %}
  </section>
  {% elif filter.type in ('select', 'multiselect', 'set', 'number_range', 'date_range') %}
  <div
    class="cm-multiselect cm-period-multiselect{% if filter.type == 'select' %} cm-multiselect--single{% endif %}"
    data-cm-filter-search-item
    data-cm-multiselect
    data-filter-id="{{ filter.id | e }}"
    data-filter-param="{{ filter.param | e }}"
    data-filter-type="{{ filter.type | e }}"
    data-filter-scope="{{ filter.scope | e }}"
    {% if filter.type == 'select' %}data-cm-singleselect="1"{% endif %}
    {% if filter.select_all %}data-select-all-option="1" data-select-all-value="{{ filter.select_all_value | e }}"{% endif %}
    data-all-label="{{ filter.select_all_label or filter.placeholder or filter.label | e }}"
    data-placeholder="{{ filter.placeholder or filter.label | e }}"
  >
    <button type="button" class="cm-multiselect-trigger" aria-haspopup="listbox">
      <span class="cm-multiselect-trigger__label"></span>
    </button>
    <div class="cm-multiselect-panel{% if not filter.options and not filter.select_all %} cm-multiselect-panel--empty{% endif %}" role="listbox">
      {% if filter.select_all %}
      <label class="cm-multiselect-option">
        <input type="checkbox" value="{{ filter.select_all_value | e }}" data-label="{{ filter.select_all_label or host.translate('filter_bar.all') | e }}" data-select-all="1"
          {% if filter.select_all_value in selected %}checked{% endif %}>
        {{ filter.select_all_label or host.translate('filter_bar.all') | e }}
      </label>
      {% endif %}
      {% for opt in filter.options %}{{ render_option(opt, selected) }}{% endfor %}
    </div>
  </div>
  {% elif filter.type == 'boolean' %}
  <label class="cm-filter-field cm-filter-field--boolean" data-cm-filter-search-item data-filter-id="{{ filter.id | e }}" data-filter-param="{{ filter.param | e }}" data-filter-type="{{ filter.type | e }}" data-filter-scope="{{ filter.scope | e }}">
    <input type="checkbox" value="1" data-cm-filter-input{% if selected in (true, 1, '1') %} checked{% endif %}>
    <span>{{ filter.label | e }}</span>
  </label>
  {% else %}
  {% set selected_value = selected if selected is string or selected is number else '' %}
  <label class="cm-filter-field" data-cm-filter-search-item data-filter-id="{{ filter.id | e }}" data-filter-param="{{ filter.param | e }}" data-filter-type="{{ filter.type | e }}" data-filter-scope="{{ filter.scope | e }}">
    <span class="cm-filter-field__label">{{ filter.label | e }}</span>
    <input
      type="{% if filter.type == 'number' %}number{% elif filter.type in ('date', 'date_range') %}date{% else %}search{% endif %}"
      name="{{ filter.param | e }}"
      value="{{ selected_value | e }}"
      placeholder="{{ filter.placeholder or filter.label | e }}"
      data-cm-filter-input
    >
  </label>
  {% endif %}
  {% endfor %}
</div>