{% load catalogue_tags %}{# A product in a listing. Context: product, purchase (PurchaseInfo or None). #}
{% with url=product.get_absolute_url image=product.primary_image %}
<article class="bk-product-card">
  <a class="bk-product-card__cover" href="{{ url }}" tabindex="-1" aria-hidden="true">
    {% if image %}<img src="{{ image.get_absolute_url }}" alt="" loading="lazy">{% else %}<span class="bk-product-card__placeholder">{{ product.title }}</span>{% endif %}
  </a>
  <div class="bk-product-card__body">
    {% if product.kind %}<p class="bk-product-card__meta">{{ product.kind }}</p>{% endif %}
    <h3 class="bk-product-card__title"><a href="{{ url }}">{{ product.title }}</a></h3>
    {% if product.subtitle %}<p class="bk-product-card__subtitle">{{ product.subtitle }}</p>{% endif %}
    {% if product.short_description %}<p class="bk-product-card__text">{{ product.short_description }}</p>{% endif %}
    <p class="bk-product-card__footer">
      {% if purchase.best_offer.formatted_price %}<span class="bk-product-card__price">{{ purchase.best_offer.formatted_price }}</span>{% elif purchase and purchase.formatted_price %}<span class="bk-product-card__price">{{ purchase.formatted_price }}</span>{% endif %}
      <a class="bk-product-card__more" href="{{ url }}">More<span class="bk-catalogue-sr"> about {{ product.title }}</span> &rarr;</a>
    </p>
  </div>
</article>
{% endwith %}