{% import 'macros/stickers.html' as stick %}
{% import '_types/product/prices.html' as prices %}
{% set prices_ns = namespace() %}
{{ prices.set_prices(p, prices_ns) }}
{% set item_href = url_for('market.browse.product.product_detail', slug=p.slug)|host %}
<div class="flex flex-col rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden relative">
  {# ❤️ like button overlay - OUTSIDE the link #}
  {% if g.user %}
  <div class="absolute top-2 right-2 z-10 text-6xl md:text-xl">
    {% set slug = p.slug %}
    {% set liked = p.is_liked or False %}
    {% include "_types/browse/like/button.html" %}
  </div>
  {% endif %}

  <a
    href="{{ item_href }}"
    hx-get="{{ item_href }}"
    hx-target="#main-panel"
    hx-select ="{{hx_select_search}}"
    hx-swap="outerHTML"
    hx-push-url="true"
    class=""
  >

    {# Make this relative so we can absolutely position children #}
    <div class="w-full aspect-square bg-stone-100 relative">
      {% if p.image %}
        <figure class="inline-block w-full h-full">
          <div class="relative w-full h-full">
            <img
              src="{{ p.image }}"
              alt="no image"
              class="absolute inset-0 w-full h-full object-contain object-top"
              loading="lazy" decoding="async" fetchpriority="low"
            />

            {% for l in p.labels %}
              <img
                src="{{ asset_url('labels/' + l + '.svg') }}"
                alt=""
                class="pointer-events-none absolute inset-0 w-full h-full object-contain object-top"
              />
            {% endfor %}
          </div>

          <figcaption class="
              mt-2 text-sm text-center
              {{ 'bg-yellow-200' if p.brand in selected_brands else '' }}
              text-stone-600
            ">
            {{ p.brand }}
          </figcaption>
        </figure>

      {% else %}
        <div class="p-2 flex flex-col items-center justify-center gap-2 text-red-500 h-full relative">
          <div class="text-stone-400 text-xs">No image</div>
          <ul class="flex flex-row gap-1">
            {% for l in p.labels %}
              <li>{{ l }}</li>
            {% endfor %}
          </ul>
          <div class="text-stone-900 text-center line-clamp-3 break-words [overflow-wrap:anywhere]">
            {{ p.brand }}
          </div>
        </div>
      {% endif %}

    </div>
    {# <div>{{ prices.rrp(prices_ns) }}</div> #}
    {{ prices.card_price(p)}}

    {% import '_types/product/_cart.html' as _cart %}
  </a>
<div class="flex justify-center">
  {{ _cart.add(p.slug, cart)}}
</div>
      

  <a
    href="{{ item_href }}"
    hx-get="{{ item_href }}"
    hx-target="#main-panel"
    hx-select ="{{hx_select_search}}"
    hx-swap="outerHTML"
    hx-push-url="true"
  >
    <div class="flex flex-row justify-center gap-2 p-2">
      {% for s in p.stickers %}
        {{ stick.sticker(
          asset_url('stickers/' + s + '.svg'),
          s,
          True,
          size=24,
          found=s in selected_stickers
        ) }}
      {% endfor %}
    </div>
    <div class="text-sm font-medium text-stone-800 text-center line-clamp-3 break-words [overflow-wrap:anywhere]">
      {{ p.title | highlight(search) }}
    </div>
  </a>
</div>