{% import 'macros/stickers.html' as stick %}

<nav aria-label="stickers" class="px-4 pb-3">
  {# One row only; center when not overflowing; horizontal scroll when needed #}
  <ul 
    class="flex w-full items-start justify-center gap-3 overflow-x-auto overflow-y-visible pr-1 no-scrollbar"
  >

    {% 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 %}

      <li class="list-none shrink-0">
        <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="{{ s.name }}" aria-label="{{ s.name }}"
          class="flex flex-col items-center justify-start p-1 rounded hover:bg-stone-50">
          <span class="text-sm">{{s.name|capitalize if s.name|lower != 'sugarfree' else 'Sugar'}}</span>
          {{ stick.sticker(asset_url('stickers/' + s.name + '.svg'), s.name, is_on) }}

          {% if s.count is not none %}
            <span class="
              {{'text-[10px] text-stone-500' if s.count != 0 else 'text-md text-red-500 font-bold'}}
              mt-1 leading-none tabular-nums
            "
            >
              {{ s.count }}
            </span>
          {% endif %}
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>

{# Optional: hide horizontal scrollbar on mobile while keeping scrollable #}
<style>
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>