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

<ul
  id="labels-details-desktop"
  class="flex justify-center p-0 m-0 gap-2"
>
  {% 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>
      <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"
      >
        <!-- col 1: icon -->
        {{ stick.sticker(asset_url('nav-labels/' + 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>