{# Categories #}
<nav aria-label="Categories"
     class="rounded-xl border bg-white shadow-sm min-h-0">
  <ul class="divide-y">
    {% set top_active = (current_local_href == top_local_href) %}
    {% set href = (url_for('market.browse.browse_top', top_slug=top_slug) ~ qs)|host %}
    <li>
      <a
        href="{{ href }}"
        hx-get="{{ href }}"
        hx-target="#main-panel"
        hx-select="{{hx_select_search}}"
        hx-swap="outerHTML"
        hx-push-url="true"
        aria-selected="{{ 'true' if top_active else 'false' }}"
        class="block px-4 py-3 text-[15px] transition {{select_colours}}">
        <div class="prose prose-stone max-w-none">All products</div>
      </a>
    </li>

    {% for sub in subs_local %}
      {% set active = (current_local_href == sub.local_href) %}
      {% set href = (url_for('market.browse.browse_sub', top_slug=top_slug, sub_slug=sub.slug) ~ qs)|host %}
      <li>
        <a
          href="{{ href }}"
          hx-get="{{ href }}"
          hx-target="#main-panel"
          hx-select="{{hx_select_search}}"
          hx-swap="outerHTML"
          hx-push-url="true"
          aria-selected="{{ 'true' if active else 'false' }}"
          class="block px-4 py-3 text-[15px] border-l-4 transition {{select_colours}}"
        >
          <div class="prose prose-stone max-w-none">{{ (sub.html_label or sub.name) | safe }}</div>
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>