<nav aria-label="Brands" class="px-4 pb-3" >
  {% if  brands|length %}
    <h2 class="text-md mt-2 font-semibold">Brands</h2>
    <ul class="space-y-1 pr-1" >
      {% for b in brands %}
        {% set is_selected = (b.name in selected_brands) %}
        <li>
          {{current_local_href}}
          <a
            {% if is_selected %}
              {% set href = (current_local_href ~ {"remove_brand": b.name, "page": None}|qs)|host %}
            {% else %}
              {% set href = (current_local_href ~ {"add_brand": b.name, "page": None}|qs)|host %}
            {%endif%}
            href="{{ href }}"
            hx-get="{{ href }}"

            hx-target="#main-panel"
            hx-select="{{hx_select_search}}"
            hx-swap="outerHTML"
            hx-push-url="true"

            class="flex items-center gap-2 my-3 px-2 py-2 rounded transition {% if is_selected %} bg-stone-900 text-white {% else %} hover:bg-stone-50 {% endif %}">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded border {% if is_selected %} border-stone-900 bg-stone-900 text-white {% else %} border-stone-300 {% endif %}">
              {% if is_selected %}
                <svg viewBox="0 0 24 24" class="w-4 h-4" aria-hidden="true">
                  <path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              {% endif %}
            </span>
            <span class="flex-1 text-sm">{{ b.name }}</span>
            {% if b.count is not none %}
              <span class="text-xs {% if is_selected %}opacity-90{% else %}text-stone-500{% endif %}">{{ b.count }}</span>
            {% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</nav>