{% comment %}
Reusable chip-style filter group.

Drop this partial into any list/catalog page. Multiple groups can live in the
same enclosing <form>; each one drives its own comma-separated hidden input.

Required context:
* name:   string -- the group key. The hidden input MUST be present in the
                   parent template as
                   <input type="hidden" name="{{ name }}" value="..."
                          data-filter-csv="{{ name }}">
                   (kept in the parent so callers control its initial value).
* label:  string -- heading shown above the chips.
* chips:  iterable of {value, label, selected} dicts.

Optional context:
* empty_message: text shown when ``chips`` is empty (defaults to a generic
                 placeholder via {{ empty_message|default:_("No options yet.") }}).

Each chip is a real <button>, so it is focusable and answers to Enter/Space; a
<span> was reachable by mouse only.

The accompanying JS (static/src/chip-filters.js) toggles ``.filter-chip.active``
on click and re-emits the comma-separated value into the hidden input keyed by
``data-filter-csv``, then fires `change` on it so a live table can redraw without
a submit. Submitting the form sends the result; servers split on comma. No XHR by
default -- keeps URLs bookmarkable.
{% endcomment %}
{% load i18n %}
<div class="card mb-3">
  <div class="card-body">
    {% if label %}<h2 class="h6 mb-2">{{ label }}</h2>{% endif %}
    {% if chips %}
      <div class="d-flex flex-wrap gap-1" data-filter-group="{{ name }}">
        {% for chip in chips %}
          <button type="button" class="filter-chip {% if chip.selected %}active{% endif %}"
                  aria-pressed="{% if chip.selected %}true{% else %}false{% endif %}"
                  data-value="{{ chip.value }}">{{ chip.label }}</button>
        {% endfor %}
      </div>
    {% else %}
      <p class="small text-body-secondary mb-0">
        {{ empty_message|default:_("No options yet.") }}
      </p>
    {% endif %}
  </div>
</div>