{% extends "base.html" %}
{% load catalogue_tags %}
{% block title %}{% catalogue_wording as words %}{{ distributor.name }}: {{ words.phrase }} in {{ distributor.region_label|default:distributor.countries }} | {% catalogue_name as name %}{{ site_name|default:name }}{% endblock %}
{% block meta %}{% if distributor.note %}<meta name="description" content="{{ distributor.note }}">{% endif %}{% endblock %}
{% block body_class %} bk-catalogue-page bk-catalogue-distributor-page{% endblock %}
{% block content %}
<div class="bk-catalogue">
  <nav class="bk-product__breadcrumb" aria-label="Breadcrumb"><a href="{% url 'catalogue:distributor_list' %}">Where to buy</a> <span aria-hidden="true">&rsaquo;</span> <span>{{ distributor.name }}</span></nav>

  <header class="bk-distributor">
    {% if distributor.logo %}<img class="bk-distributor__logo" src="{{ distributor.logo.get_absolute_url }}" alt="{{ distributor.name }}">{% endif %}
    <div class="bk-distributor__body">
      <p class="bk-catalogue-distributor__region">{% if distributor.is_worldwide %}Worldwide{% else %}{{ distributor.region_label|default:distributor.countries }}{% endif %}{% if distributor.kind == 'trade' %} · trade{% endif %}</p>
      <h1 class="bk-catalogue__title">{{ distributor.name }}</h1>
      {% if distributor.description %}<div class="bk-distributor__text">{{ distributor.description|rich }}</div>{% elif distributor.note %}<p class="bk-distributor__text">{{ distributor.note }}</p>{% endif %}
      <ul class="bk-distributor__contact">
        {% if distributor.url %}<li><a class="bk-product-button" href="{{ distributor.url }}" target="_blank" rel="noopener">Visit {{ distributor.url|link_host }}</a></li>{% endif %}
        {% if distributor.phone %}<li>Tel {{ distributor.phone }}</li>{% endif %}
        {% if distributor.email %}<li><a href="mailto:{{ distributor.email }}">{{ distributor.email }}</a></li>{% endif %}
        {% if distributor.address %}<li>{{ distributor.address|linebreaksbr }}</li>{% endif %}
      </ul>
    </div>
  </header>

  {% if offers %}
  <section class="bk-catalogue-section">
    <h2 class="bk-catalogue-section__title">{% catalogue_wording as words %}{{ words.plural|capfirst }} available here</h2>
    <ul class="bk-distributor-offers">
      {% for offer in offers %}
      <li>
        <a class="bk-distributor-offer{% if offer.in_stock is False %} is-out{% endif %}" href="{{ offer.url }}" target="_blank" rel="noopener">
          {% with image=offer.product.primary_image %}{% if image %}<img class="bk-distributor-offer__cover" src="{{ image.get_absolute_url }}" alt="" loading="lazy">{% elif offer.image_url %}<img class="bk-distributor-offer__cover" src="{{ offer.image_url }}" alt="" loading="lazy">{% endif %}{% endwith %}
          <span class="bk-distributor-offer__title">{{ offer.product.title }}</span>
          <span class="bk-distributor-offer__price">{{ offer.formatted_price|default:"Visit shop" }}{% if offer.in_stock is False %} · out of stock{% endif %}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% if distributor.last_scanned %}<p class="bk-offers__note">Prices as seen in the shop on {{ distributor.last_scanned|date:"j F Y" }}.</p>{% endif %}
  </section>
  {% endif %}
</div>
{% endblock %}