{% extends "base.html" %}
{% load catalogue_tags %}
{% block title %}{% catalogue_wording as words %}Where to buy {{ words.phrase }} | {% catalogue_name as name %}{{ site_name|default:name }}{% endblock %}
{% block body_class %} bk-catalogue-page bk-catalogue-distributors-page{% endblock %}
{% block content %}
<div class="bk-catalogue">
  <header class="bk-catalogue__header">
    <h1 class="bk-catalogue__title">Where to buy</h1>
    <p class="bk-catalogue__intro">Find distributors serving your country and order online or by phone.</p>
    <div class="bk-catalogue__tools">{% include "catalogue/includes/country_picker.html" with country=country next=request.get_full_path %}</div>
  </header>

  {% if local_distributors %}
  <section class="bk-catalogue-section bk-catalogue-section--local">
    <h2 class="bk-catalogue-section__title">In {{ country|country_name }}</h2>
    <div class="bk-catalogue-distributors">
      {% for distributor in local_distributors %}{% include "catalogue/includes/distributor_card.html" with region=distributor.region_label %}{% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="bk-catalogue-section">
    <h2 class="bk-catalogue-section__title">Distributors by country</h2>
    <div class="bk-catalogue-distributors">
      {% for group in retail_groups %}{% for distributor in group.distributors %}{% include "catalogue/includes/distributor_card.html" with region=group.label %}{% endfor %}{% endfor %}
    </div>
  </section>

  {% if trade_groups %}
  <section class="bk-catalogue-section bk-catalogue-section--trade" id="trade">
    <h2 class="bk-catalogue-section__title">Trade distributors</h2>
    <p>{% catalogue_wording as words %}Retailers can order {{ words.plural }} from these trade distributors.</p>
    {% for group in trade_groups %}
    <div class="bk-catalogue-trade">
      <h3 class="bk-catalogue-trade__region">{{ group.label }}</h3>
      <ul class="bk-catalogue-trade__list">
        {% for distributor in group.distributors %}
        <li>
          <strong>{% if distributor.url %}<a href="{{ distributor.url }}" target="_blank" rel="noopener">{{ distributor.name }}</a>{% else %}{{ distributor.name }}{% endif %}</strong>
          {% if distributor.phone %}<span>Tel {{ distributor.phone }}</span>{% endif %}
          {% if distributor.email %}<span><a href="mailto:{{ distributor.email }}">{{ distributor.email }}</a></span>{% endif %}
          {% if distributor.note %}<span class="bk-catalogue-trade__note">{{ distributor.note }}</span>{% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </section>
  {% endif %}
</div>
{% endblock %}