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


<nav aria-label="sort" 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">

    {% for key,label,icon in sort_options %}
    <li class="list-none">
      <div class="flex flex-col items-center justify-center w-full">
        <a
          {% if sort == key %}
            {% set href= (current_local_href, {"sort": None, "page": None}|qs )|host %}          
          {% else %}
            {% set href= (current_local_href ~ {"sort": key, "page": None}|qs )|host %}
          {% endif %}
          href="{{ href }}"
          hx-get="{{ href }}"
          hx-target="#main-panel"
          hx-select="{{hx_select_search}}"
          hx-swap="outerHTML"
          hx-push-url="true"
        >
          {{ stick.sticker(asset_url(icon), label, sort==key) }}
        </a>

      </div>
    </li>
    {% endfor %}
  </ul>
</nav>