{% macro add(slug, cart, oob='false') %}
{% set quantity = cart
      | selectattr('product.slug', 'equalto', slug)
      | sum(attribute='quantity') %}

<div id="cart-{{ slug }}" {% if oob=='true'  %} hx-swap-oob="{{oob}}" {% endif %}>
  
  {% if not quantity %}
    <form
      action="{{ url_for('market.browse.product.cart', slug=slug) }}"
      method="post"
      hx-post="{{ url_for('market.browse.product.cart', slug=slug) }}"
      hx-target="#cart-mini"
      hx-swap="outerHTML"
      class="rounded flex items-center"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input
        type="hidden"
        name="count"
        value="1"
      >

      <button
        type="submit"
        class="relative inline-flex items-center justify-center text-sm font-medium text-stone-500 hover:bg-emerald-50"
      >
        <span class="relative inline-flex items-center justify-center">
          <i class="fa fa-cart-plus text-4xl" aria-hidden="true"></i>

          <!-- black + overlaid in the center -->
          
        </span>
      </button>
    </form>

  {% else %}
    <div class="rounded flex items-center gap-2">
      <!-- minus -->
      <form
        action="{{ url_for('market.browse.product.cart', slug=slug) }}"
        method="post"
        hx-post="{{ url_for('market.browse.product.cart', slug=slug) }}"
        hx-target="#cart-mini"
        hx-swap="outerHTML"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input
          type="hidden"
          name="count"
          value="{{ quantity - 1 }}"
        >
        <button
          type="submit"
          class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl"
        >
          -
        </button>
      </form>

      <!-- basket with quantity badge -->
      <a
        class="relative inline-flex items-center justify-center text-emerald-700"
        href="{{ cart_url('/') }}"
      >
        <span class="relative inline-flex items-center justify-center">
          <i class="fa-solid fa-shopping-cart text-2xl" aria-hidden="true"></i>

          <span
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
          >
            <span
              class="flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold"
            >
              {{ quantity }}
            </span>
          </span>
        </span>
      </a>

      <!-- plus -->
      <form
        action="{{ url_for('market.browse.product.cart', slug=slug) }}"
        method="post"
        hx-post="{{ url_for('market.browse.product.cart', slug=slug) }}"
        hx-target="#cart-mini"
        hx-swap="outerHTML"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input
          type="hidden"
          name="count"
          value="{{ quantity + 1 }}"
        >
        <button
          type="submit"
          class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl"
        >
          +
        </button>
      </form>
    </div>
  {% endif %}
</div>
{% endmacro %}



{% macro cart_item(oob=False) %}

{% set p = item.product %}
{% set unit_price = p.special_price or p.regular_price %}
<article
    id="cart-item-{{p.slug}}"
    {% if oob %}
    hx-swap-oob="{{oob}}"
    {% endif %}
    class="flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4 md:p-5"
  >
    <div class="w-full sm:w-32 shrink-0 flex justify-center sm:block">
    {% if p.image %}
      <img
        src="{{ p.image }}"
        alt="{{ p.title }}"
        class="w-24 h-24 sm:w-32 sm:h-28 object-cover rounded-xl border border-stone-100"
        loading="lazy"
      >
    {% else %}
      <div
        class="w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300 flex items-center justify-center text-xs text-stone-400"
      >
        No image
      </div>'market', 'product', p.slug
    {% endif %}
  </div>

    {# Details #}
    <div class="flex-1 min-w-0">
      <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3">
        <div class="min-w-0">
          <h2 class="text-sm sm:text-base md:text-lg font-semibold text-stone-900">
            {% set href=url_for('market.browse.product.product_detail', slug=p.slug) %}
            <a
              href="{{ href }}"
              hx_get="{{href}}"
              hx-target="#main-panel"
              hx-select ="{{hx_select_search}}"
              hx-swap="outerHTML"
              hx-push-url="true"
              class="hover:text-emerald-700"
            >
              {{ p.title }}
            </a>
          </h2>

          {% if p.brand %}
            <p class="mt-0.5 text-[0.7rem] sm:text-xs text-stone-500">
              {{ p.brand }}
            </p>
          {% endif %}

          {% if item.is_deleted %}
            <p class="mt-2 inline-flex items-center gap-1 text-[0.65rem] sm:text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5">
              <i class="fa-solid fa-triangle-exclamation text-[0.6rem]" aria-hidden="true"></i>
              This item is no longer available or price has changed
            </p>
          {% endif %}
        </div>

        {# Unit price #}
        <div class="text-left sm:text-right">
          {% if unit_price %}
            {% set symbol = "£" if p.regular_price_currency == "GBP" else p.regular_price_currency %}
            <p class="text-sm sm:text-base font-semibold text-stone-900">
              {{ symbol }}{{ "%.2f"|format(unit_price) }}
            </p>
            {% if p.special_price and p.special_price != p.regular_price %}
              <p class="text-xs text-stone-400 line-through">
                {{ symbol }}{{ "%.2f"|format(p.regular_price) }}
              </p>
            {% endif %}
          {% else %}
            <p class="text-xs text-stone-500">No price</p>
          {% endif %}
        </div>
      </div>

      <div class="mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4">
        <div class="flex items-center gap-2 text-xs sm:text-sm text-stone-700">
          <span class="text-[0.65rem] sm:text-xs uppercase tracking-wide text-stone-500">Quantity</span>
          <form
            action="{{ url_for('market.browse.product.cart', slug=p.slug) }}"
            method="post"
            hx-post="{{ url_for('market.browse.product.cart', slug=p.slug) }}"
            hx-target="#cart-mini"
            hx-swap="outerHTML"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input
              type="hidden"
              name="count"
              value="{{ item.quantity - 1 }}"
            >
            <button
              type="submit"
              class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl"
            >
              -
            </button>
          </form>
          <span class="inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium">
            {{ item.quantity }}
          </span>
          <form
            action="{{ url_for('market.browse.product.cart', slug=p.slug) }}"
            method="post"
            hx-post="{{ url_for('market.browse.product.cart', slug=p.slug) }}"
            hx-target="#cart-mini"
            hx-swap="outerHTML"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input
              type="hidden"
              name="count"
              value="{{ item.quantity + 1 }}"
            >
            <button
              type="submit"
              class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl"
            >
              +
            </button>
          </form>
        </div>

        <div class="flex items-center justify-between sm:justify-end gap-3">
          {% if unit_price %}
            {% set line_total = unit_price * item.quantity %}
            {% set symbol = "£" if p.regular_price_currency == "GBP" else p.regular_price_currency %}
            <p class="text-sm sm:text-base font-semibold text-stone-900">
              Line total:
              {{ symbol }}{{ "%.2f"|format(line_total) }}
            </p>
          {% endif %}
        </div>
      </div>
    </div>
  </article>

{% endmacro %}