{% load wagtailcore_tags wagtailimages_tags core_tags %}

<div class="related-articles related-articles{{section.get_effective_extra_style_hints}}">
{% get_translation self.get_parent_section as section %}
{% get_next_article self as next_article %}
{% if next_article and self.get_parent_section.enable_next_section %}
  <h3 class="heading heading--small related-articles__up-next">{% trans "Next up in" %} {{ section.title }}</h3>
  <div class="related-articles-up-next">
    {% if next_article.image %}
      <a href="{% pageurl next_article.specific %}" class="article__anchor">
        {% image next_article.image width-320 class="article__image" %}
      </a>
    {% endif %}
    <h1 class="heading heading--xx-large related-articles-up-next__title">
      <a href="{% pageurl next_article.specific %}" class="call-to-action__item--text call-to-action__item--text-related-article">
        {{next_article.title}}
      </a>
    </h1>
    {% if next_article.subtitle %}
      <p class="related-articles-up-next__desc">{{next_article.subtitle}}</p>
    {% endif %}
  </div>
{% endif %}
</div>

{% if self.get_parent_section.enable_recommended_section %}
{% get_recommended_articles self as recommended_articles %}
{% if recommended_articles %}
  <h3 class="heading heading--small related-articles__recommended">{% trans "Recommended" %}</h3>
  <div class="related-articles-recommended">
    <ul class="related-articles-recommended-list">
      {% for article in recommended_articles %}
      <li class="related-articles-recommended-list__item
      {% if forloop.counter0 == 0 %} related-articles-recommended-list__item--hero
        {% elif forloop.counter0 == 1 %}
          related-articles-recommended-list__item--grid
        {% elif forloop.counter0 == 2 %}
          related-articles-recommended-list__item--grid
       {% endif %}">
        {% if article.image %}
          {% if forloop.counter0 == 0 %}
            <a href="{% pageurl article.specific %}" class="promoted-article-list__anchor">
              {% image article.image width-320 class="article__image" %}
            </a>
          {% elif forloop.counter0 == 1 %}
            <a href="{% pageurl article.specific %}" class="promoted-article-list__anchor promoted-article-list__anchor-grid">
            {% image article.image width-200 height-200 class="article__image article__image-thumbnail" %}
            </a>
          {% elif forloop.counter0 == 2 %}
          <a href="{% pageurl article.specific %}" class="promoted-article-list__anchor promoted-article-list__anchor-grid">
            {% image article.image width-200 height-200 class="article__image article__image-thumbnail" %}
          </a>
           {% endif %}
        {% endif %}

        <div class="related-articles-recommended-list__content {% if forloop.first %} related-articles-recommended-list__content--hero {% endif %}">
          <h3 class="heading heading--large related-articles-recommended__title">
            <a href="{% pageurl article.specific %}">{{article.title}}</a>
          </h3>
          {% if article.subtitle %}
            <p class="related-articles-recommended__desc">{{article.subtitle}}</p>
          {% endif %}
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}
{% endif %}