  {# Tag group filter bar #}
    <nav class="max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm">
      <ul class="divide-y flex flex-col gap-3">
        <li>
          {% set is_on = (selected_groups | length == 0 and selected_tags | length == 0) %}
          {% set href =
            {
            'remove_group': selected_groups,
            'remove_tag': selected_tags,
            }|qs|host %}
          <a
            class="px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
            href="{{ href }}"
            hx-get="{{ href }}"
            hx-target="#main-panel"
            hx-select="{{hx_select_search}}"
            hx-swap="outerHTML"
            hx-push-url="true"
          >
            Any Topic
          </a>
        </li>

        {% for group in tag_groups %}
          {% if group.post_count > 0 or (selected_groups and group.slug in selected_groups) %}
          <li>
            {% set is_on = (selected_groups and (group.slug in selected_groups)) %}
            {% set qs = {"remove_group": group.slug, "page":None}|qs if is_on
                        else {"add_group": group.slug, "page":None}|qs %}
            {% set href = qs|host %}
            <a
              class="flex items-center gap-2 px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
              href="{{ href }}"
              hx-get="{{ href }}"
              hx-target="#main-panel"
              hx-select="{{hx_select_search}}"
              hx-swap="outerHTML"
              hx-push-url="true"
            >

              {% if group.feature_image %}
                <img
                  src="{{ group.feature_image }}"
                  alt="{{ group.name }}"
                  class="h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"
                >
              {% else %}
                <div
                  class="h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"
                  style="{% if group.colour %}background-color: {{ group.colour }}; color: white;{% else %}background-color: #e7e5e4; color: #57534e;{% endif %}"
                >
                  {{ group.name[:1] }}
                </div>
              {% endif %}

              <span class="inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200">
                {{ group.name }}
              </span>

              <span class="flex-1"></span>
              <span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">
                {{ group.post_count }}
              </span>
            </a>
          </li>
          {% endif %}
        {% endfor %}

      </ul>
    </nav>
