{%- comment -%} GBC product card. Live price, compare-at, stock and image from Shopify. {%- endcomment -%}
{%- liquid
  assign v = p.selected_or_first_available_variant
  assign on_sale = false
  if p.compare_at_price > p.price
    assign on_sale = true
    assign save = p.compare_at_price | minus: p.price | times: 100 | divided_by: p.compare_at_price
  endif
  assign low = false
  if p.available and threshold > 0 and v.inventory_management == 'shopify' and v.inventory_policy == 'deny' and v.inventory_quantity <= threshold and v.inventory_quantity > 0
    assign low = true
  endif
  assign band_price = p.price | divided_by: 100.0
-%}
<li class="gbc-card{% unless p.available %} is-soldout{% endunless %}" id="p-{{ p.handle }}" data-gbc-price="{{ band_price }}" {{ attrs }}>
  <a class="gbc-card__media" href="{{ p.url }}" tabindex="-1" aria-hidden="true">
    {%- if p.featured_image -%}
      {%- assign loading = 'lazy' -%}{%- if index <= 4 -%}{%- assign loading = 'eager' -%}{%- endif -%}
      {%- assign img_alt = p.featured_image.alt | default: p.title -%}
      {{ p.featured_image | image_url: width: 1080 | image_tag: loading: loading, widths: '360, 540, 720, 1080', sizes: '(min-width: 1140px) 25vw, (min-width: 760px) 33vw, 50vw', alt: img_alt }}
    {%- endif -%}
    {%- if p.available == false -%}<span class="gbc-badge">Sold out</span>{%- elsif on_sale and save >= 5 -%}<span class="gbc-badge">Save {{ save }}%</span>{%- endif -%}
    {%- if low -%}<span class="gbc-stock">Low stock</span>{%- endif -%}
  </a>
  <h3 class="gbc-card__title"><a href="{{ p.url }}">{{ p.title | escape }}</a></h3>
  {%- if blurb != blank -%}<p class="gbc-card__blurb">{{ blurb | escape }}</p>{%- endif -%}
  <p class="gbc-price">
    <span class="gbc-price__now{% if on_sale %} is-sale{% endif %}">{% if p.price_varies %}From {% endif %}{{ p.price | money }}</span>
    {%- if on_sale -%}<s class="gbc-price__was"><span class="gbc-sr">Regular price </span>{{ p.compare_at_price | money }}</s>{%- endif -%}
  </p>
  {%- if p.available == false -%}
    <button class="gbc-btn gbc-btn--ghost" type="button" disabled>Sold out</button>
  {%- elsif p.has_only_default_variant -%}
    {%- form 'product', p -%}
      <input type="hidden" name="id" value="{{ v.id }}">
      <button class="gbc-btn" type="submit" name="add">Add to cart</button>
    {%- endform -%}
  {%- else -%}
    <a class="gbc-btn gbc-btn--ghost" href="{{ p.url }}">Choose options</a>
  {%- endif -%}
</li>