{% import 'macros/stickers.html' as stick %}
{% set sort_val = sort|default('az', true) %}

<ul
  id="sort-details-desktop"
  class="flex w-full p-0 m-0 border bg-white shadow-sm rounded-xl gap-0 [&>li]:list-none [&>li]:flex-1"
>
  {% for key,label,icon in sort_options %}
    {% set is_on = (sort_val == key) %}
    {% set qs = {"sort": None, "page": None}|qs if is_on
                  else {"sort": key, "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' }}"
        class="flex flex-col items-center justify-center w-full h-full py-2 m-0"
      >
        {{ stick.sticker(asset_url(icon), label, is_on) }}
      </a>
    </li>
  {% endfor %}
</ul>