{% import 'macros/stickers.html' as stick %}
<nav aria-label="like" class="px-4 pb-3">
  {% set qs = {"liked": None if liked else True, "page": None}|qs%}
  {% set href = (current_local_href ~ qs)|host %}
    <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 liked else 'false' }}"
      title="liked" aria-label="liked"
      class="flex flex-col items-center justify-start p-1 rounded hover:bg-stone-50"
      {% if liked %}
        aria-label="liked and unliked"
      {% else %}
        aria-label="just liked"
      {% endif %}
    >
      {% if liked %}
        <i aria-hidden="true"
          class="fa-solid fa-heart text-red-500 text-[40px] leading-none"
        ></i>
      {% else %}
      <i aria-hidden="true"
        class="fa-solid fa-heart text-stone-500 text-[40px] leading-none"
      ></i>
      {% endif %}
      <span class="
        {{'text-[10px] text-stone-500' if liked_count != 0 else 'text-md text-red-500 font-bold'}}
        mt-1 leading-none tabular-nums
      "
      aria_label="liked count"
    >
        {{ liked_count }}
    </span>
    </a>
</nav>