{% from 'macros/glyphs.html' import opener %}
  <div class="px-4 py-2">
    <div class="divide-y">
      {% set all_href = (url_for('market.browse.browse_all') ~ qs)|host %}
      {% set all_active = (category_label == 'All Products') %}
      <a role="option"
        href="{{ all_href }}"
        hx-get="{{ all_href }}"
        hx-target="#main-panel"
        hx-select="{{hx_select_search}}"
        hx-swap="outerHTML"
        hx-push-url="true"
        aria-selected="{{ 'true' if all_active else 'false' }}"
        class="block rounded-lg px-3 py-3 text-base hover:bg-stone-50 {{select_colours}}">
        <div class="prose prose-stone max-w-none">
          All
        </div>
      </a>
      {% for cat, data in categories.items() %}
      <details
        class="group/cat py-1"
        {% if top_slug == (data.slug | lower) %}open{% endif %}
      >
        <summary class="flex items-center justify-between cursor-pointer select-none block rounded-lg px-3 py-3 text-base hover:bg-stone-50 {% if top_slug==(data.slug | lower) %} bg-stone-900 text-white hover:bg-stone-900 {% endif %}">

          {% set href = (url_for('market.browse.browse_top', top_slug=data.slug) ~ qs)|host %}

          <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_slug==(data.slug | lower) else 'false' }}"
            class="font-medium {{ select_colours }} flex flex-row gap-2"
          >
            <div>{{ cat }}</div>
            <div aria-label="{{ data.count }} products">{{ data.count }}</div>
          </a>
          {{ opener('cat')}}

        </summary>

        <div class="pb-3 pl-2">
          {% if data.subs %}
          <!-- Viewport -->
          <div
            data-peek-viewport
            data-peek-size-px="18"         
            data-peek-edge="bottom"
            data-peek-mask="true"
            class="m-2 bg-stone-100">
            <!-- Inner list (no negative margin by default) -->
            <div data-peek-inner class="grid grid-cols-1 gap-1 snap-y snap-mandatory pr-1" aria-label="Subcategories">
              {% for sub in data.subs %}
                {% set href = (url_for('market.browse.browse_sub', top_slug=data.slug, sub_slug=sub.slug) ~qs)|host%}
                {% if top_slug==(data.slug | lower) and sub_slug == sub.slug %}
                  <a
                    class="snap-start px-2 py-3 rounded {{select_colours}} flex flex-row gap-2"
                    aria-selected="{{ 'true' if top_slug==(data.slug | lower) and sub_slug == sub.slug else 'false' }}"
                    href="{{ href }}"
                    hx-get="{{  href }}"
                    hx-target="#main-panel"
                    hx-select="{{hx_select_search}}"
                    hx-swap="outerHTML"
                    hx-push-url="true"
                  >
                    <div>{{ sub.html_label or sub.name }}</div>
                    <div aria-label="{{ sub.count }} products">{{ sub.count }}</div>
                  </a>
                {% endif %}
              {% endfor %}
              {% for sub in data.subs %}
                  {% if not (top_slug==(data.slug | lower) and sub_slug == sub.slug) %}
                   {% set href = (url_for('market.browse.browse_sub', top_slug=data.slug, sub_slug=sub.slug) ~ qs)|host%}
                    <a
                      class="snap-start px-2 py-3 rounded {{select_colours}} flex flex-row gap-2"
                      aria-selected="{{ 'true' if top_slug==(data.slug | lower) and sub_slug == sub.slug else 'false' }}"
                      href="{{   href }}"
                      hx-get="{{ href }}"
                      hx-target="#main-panel"
                      hx-select="{{hx_select_search}}"
                      hx-swap="outerHTML"
                      hx-push-url="true"
                    >
                      <div>{{ sub.name }}</div>
                      <div aria-label="{{ sub.count }} products">{{ sub.count }}</div>
                    </a>
                  {% endif %}
              {% endfor %}
            </div>
          </div>
          {% else %}
            {% set href = (url_for('market.browse.browse_top', top_slug=data.slug) ~ qs)|host%}
            <a class="px-2 py-1 rounded hover:bg-stone-100 block"
                href="{{ href }}"
                hx-get="{{ href }}"
                hx-target="#main-panel"
                hx-select="{{hx_select_search}}"
                hx-swap="outerHTML"
                hx-push-url="true"
            >View all</a>
          {% endif %}
        </div>
      </details>
      {% endfor %}
      {% include '_types/market/_admin.html' %}
    </div>
  </div>