{% 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.") }}).

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``. Submitting the form sends the result; servers split on
comma. No XHR -- 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 %}
          <span class="badge bg-secondary filter-chip {% if chip.selected %}active{% endif %}"
                data-value="{{ chip.value }}">{{ chip.label }}</span>
        {% endfor %}
      </div>
    {% else %}
      <p class="small text-body-secondary mb-0">
        {{ empty_message|default:_("No options yet.") }}
      </p>
    {% endif %}
  </div>
</div>