{# Cart icon/badge — shows logo when empty, cart icon with count when items present #}

{% macro cart_icon(count=0, oob=False) %}
<div id="cart-mini" {% if oob %}hx-swap-oob="{{oob}}"{% endif %}>
  {% if count == 0 %}
  <div class="h-12 w-12 rounded-full overflow-hidden border border-stone-300 flex-shrink-0">
    <a
      href="{{ blog_url('/') }}"
      class="h-full w-full font-bold text-5xl flex-shrink-0 flex flex-row items-center gap-1"
    >
      <img
        src="{{ site().logo }}"
        class="h-full w-full rounded-full object-cover border border-stone-300 flex-shrink-0"
      >
    </a>
  </div>
  {% else %}
    <a
      href="{{ cart_url('/') }}"
      class="relative inline-flex items-center justify-center text-stone-700 hover:text-emerald-700"
    >
      <i class="fa fa-shopping-cart text-5xl" aria-hidden="true"></i>
      <span
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-full bg-emerald-600 text-white text-sm w-5 h-5"
      >
        {{ count }}
      </span>
    </a>
  {% endif %}
</div>
{% endmacro %}