{#
  Unified filter macros for browse/shop pages
  Consolidates duplicate mobile/desktop filter components
#}

{% macro filter_item(href, is_on, title, icon_html, count=none, variant='desktop') %}
  {#
    Generic filter item (works for labels, stickers, etc.)
    variant: 'desktop' or 'mobile'
  #}
  {% set base_class = "flex flex-col items-center justify-center" %}
  {% if variant == 'mobile' %}
    {% set item_class = base_class ~ " p-1 rounded hover:bg-stone-50" %}
    {% set count_class = "text-[10px] text-stone-500 mt-1 leading-none tabular-nums" if count != 0 else "text-md text-red-500 font-bold mt-1 leading-none tabular-nums" %}
  {% else %}
    {% set item_class = base_class ~ " py-2 w-full h-full" %}
    {% set count_class = "text-xs text-stone-500 leading-none justify-self-end tabular-nums" if count != 0 else "text-md text-red-500 font-bold leading-none justify-self-end tabular-nums" %}
  {% endif %}

  <a
    href="{{ href }}"
    hx-get="{{ href }}"
    hx-target="#main-panel"
    hx-select="{{ hx_select_search }}"
    hx-swap="outerHTML"
    hx-push-url="true"
    role="button"
    aria-pressed="{{ 'true' if is_on else 'false' }}"
    title="{{ title }}"
    aria-label="{{ title }}"
    class="{{ item_class }}"
  >
    {{ icon_html | safe }}
    {% if count is not none %}
      <span class="{{ count_class }}">{{ count }}</span>
    {% endif %}
  </a>
{% endmacro %}


{% macro labels_list(labels, selected_labels, current_local_href, variant='desktop') %}
  {#
    Unified labels filter list
    variant: 'desktop' or 'mobile'
  #}
  {% import 'macros/stickers.html' as stick %}

  {% if variant == 'mobile' %}
  <nav aria-label="labels" class="px-4 pb-3">
    <ul class="flex w-full items-start justify-center gap-3 overflow-x-auto overflow-y-visible pr-1 no-scrollbar">
  {% else %}
  <ul id="labels-details-desktop" class="flex justify-center p-0 m-0 gap-2" >
  {% endif %}

    {% for s in labels %}
      {% set is_on = (selected_labels and (s.name|lower in selected_labels)) %}
      {% set qs = {"remove_label": s.name, "page": None}|qs if is_on else {"add_label": s.name, "page": None}|qs %}
      {% set href = (current_local_href ~ qs)|host %}

      <li class="{{ 'list-none shrink-0' if variant == 'mobile' else '' }}">
        {{ filter_item(
          href, is_on, s.name,
          stick.sticker(asset_url('nav-labels/' ~ s.name ~ '.svg'), s.name, is_on),
          s.count, variant
        ) }}
      </li>
    {% endfor %}

  </ul>
  {% if variant == 'mobile' %}
  </nav>
  {% endif %}
{% endmacro %}


{% macro stickers_list(stickers, selected_stickers, current_local_href, variant='desktop') %}
  {#
    Unified stickers filter list
    variant: 'desktop' or 'mobile'
  #}
  {% import 'macros/stickers.html' as stick %}

  {% if variant == 'mobile' %}
  <nav aria-label="stickers" class="px-4 pb-3">
    <ul class="flex w-full items-start justify-center gap-3 overflow-x-auto overflow-y-visible pr-1 no-scrollbar">
  {% else %}
  <ul id="stickers-details-desktop"
      class="flex flex-wrap justify-center w-full p-0 m-0 border bg-white shadow-sm rounded-xl gap-1 [&>li]:list-none [&>li]:basis-[20%] [&>li]:max-w-[20%] [&>li]:grow-0"
  >
  {% endif %}

    {% for s in stickers %}
      {% set is_on = (selected_stickers and (s.name|lower in selected_stickers)) %}
      {% set qs = {"remove_sticker": s.name, "page": None}|qs if is_on else {"add_sticker": s.name, "page": None}|qs %}
      {% set href = (current_local_href ~ qs)|host %}
      {% set display_name = s.name|capitalize if s.name|lower != 'sugarfree' else 'Sugar' %}

      <li class="{{ 'list-none shrink-0' if variant == 'mobile' else '' }}">
        {% set icon_html %}
          <span class="{{ 'text-sm' if variant == 'mobile' else 'text-[11px]' }}">{{ display_name }}</span>
          {{ stick.sticker(asset_url('stickers/' ~ s.name ~ '.svg'), s.name, is_on) }}
        {% endset %}
        {{ filter_item(href, is_on, s.name, icon_html, s.count, variant) }}
      </li>
    {% endfor %}

  </ul>
  {% if variant == 'mobile' %}
  </nav>
  <style>
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  </style>
  {% endif %}
{% endmacro %}


