{% extends settings.utils.LayoutSettings.base_template %}

{% load wagtailimages_tags wagtailcore_tags %}

{% block main_content %}
<main id="content">

  <div class="bg-white border-bottom border-primary pb-1">
    <div class="container">
      <div class="u-max-text-width">
        {% include 'includes/breadcrumbs.html' %}
        <h1>{{ self.title }}</h1>
        <p class="lead">{{ self.introduction }}</p>
      </div>
    </div>
  </div>

  <ul class="list-unstyled pt-5 bg-white mb-0">
    {% for primary_topic in self.primary_topics %}
    <li class="pb-5 {% if not forloop.last %}mb-5 border-primary border-bottom{% endif %}">
      <div class="topic-list__item">
        <div class="container">
          <div class="row d-flex flex-column flex-md-row align-items-md-center w-100">
            {% if primary_topic.feed_image %}
            {# aria-hidden because a) probably not useful to screen readers and b) stop them having two focusable links to deal with #}
            <div class="col-12 col-md-4 order-first order-md-last mb-4 mb-md-0" aria-hidden="true">
              <a href="{% pageurl primary_topic %}" tabindex="-1">
                {% image primary_topic.feed_image original as feed_image %}
                <img src="{{ feed_image.url }}" alt="{{ primary_topic.feed_image.title }}" class="thumb-img border border-primary">
              </a>
            </div>
            {% endif %}
            <div class="col-12 col-md-8">
              <h2 class="h3"><a href="{% pageurl primary_topic %}">{{ primary_topic.title }}<i class="bi bi-chevron-right ms-2"></i></a></h2>
              <p class="mb-0 lead">{{ primary_topic.get_social_text }}</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>

</main>

{% endblock main_content %}