{# Brand filter (desktop, single-select) #}

{# Brands #}
<nav aria-label="Brands"
     class="rounded-xl border bg-white shadow-sm">
  <h2 class="text-md mt-2 font-semibold">Brands</h2>
  <ul class="divide-y">
    {% for b in brands %}
      {% set is_selected = (b.name in selected_brands) %}
      {% if is_selected %}
        {% set brand_href = (current_local_href ~ {"remove_brand": b.name, "page": None}|qs)|host %}
      {% else %}
        {% set brand_href = (current_local_href ~ {"add_brand": b.name, "page": None}|qs)|host %}
      {% endif %}
      <li>
        <a
          href="{{ brand_href }}"
          hx-get="{{ brand_href }}"
          hx-target="#main-panel"
          hx-select="{{hx_select_search}}"
          hx-swap="outerHTML" hx-push-url="true" hx-on:htmx:afterSwap="this.closest('details')?.removeAttribute('open')"
          class="flex items-center gap-2 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="{% if b.count==0 %}text-lg text-red-500{% else %}text-sm{% endif %} {% if is_selected %}opacity-90{% else %}text-stone-500{% endif %}">{{ b.count }}</span>
          {% endif %}
        </a>
      </li>
    {% endfor %}

  </ul>
</nav>