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

<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"
>
  {% 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>
      <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 w-full h-full flex-col items-center justify-center py-2"
      >
        <span class="text-[11px]">{{s.name|capitalize if s.name|lower != 'sugarfree' else 'Sugar'}}</span>
        <!-- col 1: icon -->
        {{ stick.sticker(asset_url('stickers/' + s.name + '.svg'), s.name, is_on)}}


        <!-- col 3: count (right aligned) -->
        {% if s.count is not none %}
          <span class="
            {{'text-xs text-stone-500' if s.count != 0 else 'text-md text-red-500 font-bold'}}
            leading-none justify-self-end tabular-nums">
            {{ s.count }}
          </span>
        {% endif %}
      </a>
    </li>

  {% endfor %}
</ul>