{% extends "base.html" %}
{% load catalogue_tags %}
{% block title %}{{ product.title }}{% if product.subtitle %}: {{ product.subtitle }}{% endif %} | {% catalogue_name as name %}{{ site_name|default:name }}{% endblock %}
{% block meta %}{% if product.short_description %}<meta name="description" content="{{ product.short_description }}">{% endif %}{% endblock %}
{% block body_class %} bk-catalogue-page bk-product-page{% endblock %}
{% block content %}
{% with image=product.primary_image %}
<article class="bk-product">
  <nav class="bk-product__breadcrumb" aria-label="Breadcrumb"><a href="{% url 'catalogue:product_list' %}">Products</a> <span aria-hidden="true">&rsaquo;</span> <span>{{ product.title }}</span></nav>

  <div class="bk-product__layout">
    <div class="bk-product__media">
      {% if image %}
      <a class="bk-product__cover" href="{{ image.get_absolute_url }}"><img src="{{ image.get_absolute_url }}" alt="{{ product.title }}"></a>
      {% endif %}
      {% if images %}
      <ul class="bk-product__gallery">
        {% for row in images %}{% if row.image.name != image.name %}
        <li><a href="{{ row.image.get_absolute_url }}"><img src="{{ row.image.get_absolute_url }}" alt="{{ row.caption|default:product.title }}" loading="lazy"></a>{% if row.caption %}<span>{{ row.caption }}</span>{% endif %}</li>
        {% endif %}{% endfor %}
      </ul>
      {% endif %}
    </div>

    <div class="bk-product__main">
      {% if product.kind %}<p class="bk-product__meta">{{ product.kind }}</p>{% endif %}
      <h1 class="bk-product__title">{{ product.title }}</h1>
      {% if product.subtitle %}<p class="bk-product__subtitle">{{ product.subtitle }}</p>{% endif %}

      {% include "catalogue/includes/purchase_box.html" with product=product purchase=purchase country=country %}

      <div class="bk-product__description">
        {% if purchase.description %}{{ purchase.description|rich }}{% elif product.description %}{{ product.description|rich }}{% else %}<p>{{ product.short_description }}</p>{% endif %}
      </div>

      <section class="bk-product__details">
        <h2 class="bk-product__heading">Details</h2>
        <dl class="bk-product__facts">
          {% if product.identifier %}<dt>Identifier</dt><dd>{{ product.identifier }}</dd>{% endif %}
          {% if product.kind %}<dt>Type</dt><dd>{{ product.kind }}</dd>{% endif %}
          {% for name, value in product.attributes.items %}<dt>{{ name }}</dt><dd>{{ value }}</dd>{% endfor %}
          {% if product.external_url %}<dt>Website</dt><dd><a href="{{ product.external_url }}" target="_blank" rel="noopener">{{ product.external_url|link_host }}</a></dd>{% endif %}
        </dl>
      </section>
    </div>
  </div>

  {% if related_products %}
  <section class="bk-product__editions">
    <h2 class="bk-product__heading">Related products</h2>
    <div class="bk-catalogue-grid">
      {% for related in related_products %}{% include "catalogue/includes/product_card.html" with product=related purchase=None %}{% endfor %}
    </div>
  </section>
  {% endif %}
</article>
{% endwith %}
{% endblock %}