{# Site-wide category menu, served as an htmx partial and swapped into the
   <aside> in base.html. `category_groups` is a two-level list of top-level
   categories, each `{ name, slug, children: [{ name, slug }] }`. A category
   with children is expandable (accordion); one without is a plain link.
   Active state is set client-side by markActiveNav() via data-nav +
   aria-current; groups auto-expand when the current page is the category or
   one of its subcategories.

   Adapted from the vendored Penguin UI component
   penguinui-components/sidebar/sidebar-with-collapsible-menus.html: Penguin's
   link treatment + active state + chevron-down rotation. Deviations: the group
   row keeps our link + toggle split (categories are navigable, not just
   expandable), and we use x-show/x-transition instead of upstream's x-collapse
   (that Alpine plugin isn't bundled in our build). #}
<p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
  {{ t(key="categories", lang=lang | default(value='sk')) }}
</p>
<div class="flex flex-col gap-1">
  <a href="/shop" data-nav="/shop"
    class="flex items-center gap-2 rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
    {{ t(key="all-products", lang=lang | default(value='sk')) }}
  </a>
  {% for group in category_groups %}
  {% if group.children | length > 0 %}
  <div x-data="{ open: false }" class="flex flex-col"
    x-init="open = ['{{ group.slug }}'{% for child in group.children %}, '{{ child.slug }}'{% endfor %}].some(s => location.pathname === '/category/' + s)">
    <div class="flex items-stretch">
      <a href="/category/{{ group.slug }}" data-nav="/category/{{ group.slug }}"
        class="flex flex-1 items-center gap-2 truncate rounded-l-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
        {{ group.name }}
      </a>
      <button type="button" x-on:click="open = ! open" x-bind:aria-expanded="open ? 'true' : 'false'"
        aria-label="{{ group.name }}"
        class="inline-flex w-8 shrink-0 items-center justify-center rounded-r-radius text-on-surface/60 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark/60 dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
          class="size-5 shrink-0 transition-transform rotate-0" x-bind:class="open ? 'rotate-180' : 'rotate-0'" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
    <ul x-show="open" x-cloak x-transition class="ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-outline pl-1 dark:border-outline-dark">
      {% for child in group.children %}
      <li>
        <a href="/category/{{ child.slug }}" data-nav="/category/{{ child.slug }}"
          class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
          {{ child.name }}
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% else %}
  <a href="/category/{{ group.slug }}" data-nav="/category/{{ group.slug }}"
    class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
    {{ group.name }}
  </a>
  {% endif %}
  {% endfor %}
</div>
{% if category_groups | length == 0 %}
<p class="px-2 py-2 text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="shop-empty", lang=lang | default(value='sk')) }}</p>
{% endif %}