{% load wagtailcore_tags core_tags wagtailimages_tags comments gem_tags %}

{% 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 %}
  <div class="article-teaser article-teaser--related {% if section.get_effective_extra_style_hints %}article-teaser-related--{{section.get_effective_extra_style_hints}}{% endif %}">
    <div class="heading heading--sidebar">
      <h1 class="heading__subheading">{% trans "Watch next" %}</h1>
    </div>
    <ul class="teaser-{{teaser_type}}">
      <li class="teaser-{{teaser_type}}__item">
        {% if next_article.image %}
          <div class="teaser-{{teaser_type}}__images">
            <a href="{% pageurl next_article.specific %}" class="teaser-{{teaser_type}}__anchor">
              {% image next_article.image width-1080 format-jpeg as teaser_thumbnail %}
              <img alt="{{ next_article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-{{teaser_type}}__thumbnail" />
            </a>
          </div>
        {% endif %}
        <div class="teaser-{{teaser_type}}__container">
          {% load_tags_for_article next_article as tags %}
          <ul class="teaser-tags">
            {% if tags %}
              {% if settings.core.SiteSettings.enable_tag_navigation %}
                {% for tag in tags %}
                  {% if not tag.title.20 %}
                    <li class="teaser-tags__item">
                      <a href="{% url 'tags_list' tag.slug %}" class="teaser-tags__anchor">
                        <span class="teaser-tags__title">{{ tag.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              {% elif settings.core.SiteSettings.enable_clickable_tags %}
                {% for tag in next_article.tags_list %}
                  <li class="teaser-tags__item">
                    <span class="teaser-tags__title">{{tag}}</span>
                  </li>
                {% endfor %}
              {% endif %}
            {% endif %}
          </ul>
          <a href="{% pageurl next_article.specific %}" class="teaser-{{teaser_type}}__anchor">
            <h3 class="teaser-{{teaser_type}}__title {% if next_article.title_highlight %}teaser-{{teaser_type}}__title--highlight{% endif %}">
              {% if next_article.title_highlight %}
                {{ next_article.title_highlight|smarttruncatechars:100|safe}}
              {% else %}
                {{ next_article.title|smarttruncatechars:100|safe}}
              {% endif %}
            </h3>
          </a>
          {% if next_article.subtitle_highlight or next_article.body_highlight %}
            <p class="teaser-{{teaser_type}}__subtitle">
              {% if next_article.subtitle_highlight %}
                {{next_article.subtitle_highlight|smarttruncatechars:150|safe}}
              {% elif next_article.body_highlight %}
                {{next_article.body_highlight|smarttruncatechars:150|safe}}
              {% endif %}
            </p>
          {% elif next_article.subtitle %}
            <p class="teaser-{{teaser_type}}__subtitle">
              {{ next_article.subtitle|smarttruncatechars:150|safe}}
            </p>
          {% endif %}
          {% with ancestor=next_article|parent_section_depth:4 parent=next_article.get_parent_section.get_parent_section %}

          {% if ancestor|is_content:"Watch" or parent|is_content:"Watch" %}
                  <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl next_article.specific %}">
                    {% trans "Watch video" %}
                  </a>
                </div>
              </li>
            </ul>
            <div class="call-to-action">
              <a class="call-to-action__item call-to-action__item--paginate" href="{% if ancestor %}{% pageurl ancestor.specific %}{% elif parent %}{% pageurl parent.specific %}{% else %}{% pageurl section.specific %}{% endif %}">
                {% trans "More episodes" %}
              </a>
            </div>
          {% elif ancestor|is_content:"Listen" or parent|is_content:"Listen" %}
                <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl next_article.specific %}">
                  {% trans "Listen next" %}
                </a>
              </div>
              </li>
            </ul>
          {% else %}
              <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl next_article.specific %}">
                {% trans "Read more" %}
              </a>
            </div>
          </li>
        </ul>
        {% endif %}
      {% endwith %}

  </div>
{% endif %}

{% if self.get_parent_section.enable_recommended_section %}
  {% get_recommended_articles self as recommended_articles %}
  {% if recommended_articles %}
    <div class="article-teaser article-teaser--related {% if section.get_effective_extra_style_hints %}article-teaser-related--{{section.get_effective_extra_style_hints}}{% endif %}">
      <div class="heading heading--sidebar">
        <h1 class="heading__subheading">{% trans "Recommended" %}</h1>
      </div>
      <ul class="teaser-{{teaser_type}}">
        {% for article in recommended_articles %}
        <li class="teaser-{{teaser_type}}__item">
          {% if article.image %}
            <div class="teaser-{{teaser_type}}__images">
              <a href="{% pageurl article.specific %}" class="teaser-{{teaser_type}}__anchor">
                {% image article.image width-1080 format-jpeg as teaser_thumbnail %}
                <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-{{teaser_type}}__thumbnail" />
              </a>
            </div>
          {% endif %}
          <div class="teaser-{{teaser_type}}__container">
            {% load_tags_for_article article as tags %}
            <ul class="teaser-tags">
              {% if tags %}
                {% if settings.core.SiteSettings.enable_tag_navigation %}
                  {% for tag in tags %}
                    {% if not tag.title.20 %}
                      <li class="teaser-tags__item">
                        <a href="{% url 'tags_list' tag.slug %}" class="teaser-tags__anchor">
                          <span class="teaser-tags__title">{{ tag.title }}</span>
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                {% elif settings.core.SiteSettings.enable_clickable_tags %}
                  {% for tag in article.tags_list %}
                    <li class="teaser-tags__item">
                      <span class="teaser-tags__title">{{tag}}</span>
                    </li>
                  {% endfor %}
                {% endif %}
              {% endif %}
            </ul>
            <a href="{% pageurl article.specific %}" class="teaser-{{teaser_type}}__anchor">
              <h2 class="teaser-{{teaser_type}}__title {% if article.title_highlight %}teaser-{{teaser_type}}__title--highlight{% endif %}">
                {% if article.title_highlight %}
                  {{ article.title_highlight|smarttruncatechars:100|safe}}
                {% else %}
                  {{ article.title|smarttruncatechars:100|safe}}
                {% endif %}
              </h2>
            </a>
            <p class="teaser-{{teaser_type}}__subtitle">
              {{ article.subtitle|smarttruncatechars:150|safe}}
            </p>
            {% with ancestor=article|parent_section_depth:4 parent=article.get_parent_section.get_parent_section %}

              {% if ancestor|is_content:"Watch" or parent|is_content:"Watch" %}
              {% elif ancestor|is_content:"Listen" or parent|is_content:"Listen" %}
              {% else %}
                <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl article.specific %}">
                  {% trans "Read more" %}
                </a>
              {% endif %}
            {% endwith %}
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endif %}