{% extends "base.html" %}
{% load wagtailsettings_tags wagtailcore_tags core_tags wagtailimages_tags static comments gem_tags molo_forms_tags %}

{% block content %}
<div class="article--wrapper">
{% get_translation self.get_parent_section as section %}
  <div class="heading heading__article">
    <h1>{{self.title}}</h1>
  </div>
  {% if self.subtitle %}
    <div class="heading heading__subheading">
      <h2>{{self.subtitle}}</h2>
    </div>
  {% endif %}

  {% get_comment_count for self as comment_count %}
  {% if self.is_commenting_enabled %}
    {% if comment_count > 0 %}
      <a href="{% pageurl self %}#comments" class="call-to-action__nav-item-text call-to-action__nav-item-text--article-comments">
        {% trans "Your thoughts" %}
        ({{comment_count}})
      </a>
    {% endif %}
  {% endif %}

  {% if self.get_effective_image %}
    <a href="{% pageurl self.specific %}" class="article__anchor article__anchor--{{type}}">
      {% image self.get_effective_image fill-360x160 as article_image %}
      <img alt="{{ self.title }}" src="{{ article_image.url }}" class="article__image article__image--{{type}}"/>
    </a>
  {% endif %}
  <article>
    {% for block in self.body %}
      {% if block.block_type == 'heading' %}
        <h3 class="heading heading--large">{{ block.value }}</h3>
      {% elif block.block_type == 'image' %}
        {% image block.value width-320 alt=self.title %}
      {% elif block.block_type == 'media' %}
        <div class="media-player">
          <div class="media-player__content">
            {% with block.value as media %}
              {% include "patterns/components/media/media-player.html" %}
            {% endwith %}
          </div>
        </div>
      {% elif block.block_type == 'numbered_list' %}
        <ol class="ordered-list">
        {% for item in block.value %}
          <li class="ordered-list__item">{{ item|handle_markdown }}</li>
        {% endfor %}
        </ol>
      {% elif block.block_type == 'list' %}
        <ul class="unordered-list">
        {% for item in block.value %}
          <li class="unordered-list__item">{{ item|handle_markdown }}</li>
        {% endfor %}
      </ul>
      {% else %}
        {{ block }}
      {% endif %}
    {% endfor %}
  </article>
  {% load_tags_for_article self as tags %}
  {% if settings.core.SiteSettings.enable_clickable_tags %}
    <ul class="tags">
      {% for tag in self.tags_list %}
        <li class="tags-list__item">
          <span class="tags-list__item--tags__title">{{tag}}</span>
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  {% forms_list_for_pages page=self %}
  {% forms_list_linked_to_pages self %}

  {% social_media_article page=self %}

  {#{% include "patterns/basics/article-tags/sp_article-page-tag.html" %}#}
  {% if settings.core.SiteSettings.enable_tag_navigation %}
    {% if tags %}
      <div class="article-page-tag-cloud">
        <ul class="tag-cloud__block">
          <div class="heading heading__micro">
            <h4>{% trans "Read more about" %}</h4>
          </div>
          {% for tag in tags  %}
            <li class="tag-cloud__item">
              <a href="{% url 'tags_list' tag.slug %}" class="tag-cloud__anchor">
                <span class="tag-cloud__item-title">{{tag}}</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  {% endif %}

  {% include "comments/comment_block.html" %}
  {#{% include "patterns/basics/articles/sp_variations/related-article-teasers_up-next.html" %}#}
  {#{% include "patterns/basics/articles/sp_variations/related-article-teasers_might-like.html" %}#}

  {% get_translation self.get_parent_section as section %}
  {% get_next_article self as article %}
  {% if article and self.get_parent_section.enable_next_section %}
    <h3 class="heading related-articles__up-next">{% trans "Next up in" %} {{ section.title }}</h3>
    <div class="article-teaser">
      <ul class="teaser-stacklist">
        <li class="teaser-stacklist__item">
          {% if article.get_effective_image %}
          <a href="{% pageurl article.specific %}" class="base-teaser__thumbnail-link">
            {% image article.get_effective_image fill-96x96 as teaser_thumbnail %}
            <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="base-teaser__thumbnail" />
          </a>
          {% endif %}
          <div class="teaser-stacklist__item--content">
            {% if article.title_highlight %}
              <h3 class="base-teaser__title base-teaser__title--highlight block-with-text">
                  <a href="{% pageurl article.specific %}" class="base-teaser__title-link">
                       {{ article.title_highlight|smarttruncatechars:45|safe}}
                  </a>
              </h3>
            {% else %}
              <h3 class="base-teaser__title block-with-text">
                  <a href="{% pageurl article.specific %}" class="base-teaser__title-link">
                      {{ article.title|smarttruncatechars:45|safe}}
                  </a>
              </h3>
            {% endif %}
            {% if article.subtitle_highlight or article.body_highlight %}
              <p class="carousel-teaser__subtitle highlight-description">
                {% if article.subtitle_highlight %}
                  {{article.subtitle_highlight|smarttruncatechars:28|safe}}
                {% elif article.body_highlight %}
                  {{article.body_highlight|smarttruncatechars:28|safe}}
                {% endif %}
              </p>
            {% elif article.subtitle %}
              <p class="base-teaser__subtitle block-with-text">
                {% if article.title.30 %}
                  {{ article.subtitle|smarttruncatechars:28|safe}}
                {% else %}
                  {{ article.subtitle|smarttruncatechars:50|safe}}
                {% endif %}
              </p>
            {% endif %}

            {% get_comment_count for article as comment_count %}
            {% if article.is_commenting_enabled %}
              {% if comment_count > 0 %}
                <a href="{% pageurl article.specific %}?#comments" class="comment-counter{% if not article.allow_commenting %} comment-counter--disabled{% endif %}">
                  <img alt="Comments" srcset="{% static 'img/icons/comment.svg' %}" src="{% static 'img/icons/check@2x.png' %}" class="comment-counter__icon">
                  <span class="comment-counter__numeral">{{comment_count}}</span>
                </a>
              {% endif %}
            {% endif %}

            {% load_tags_for_article article as tags %}
            {% if tags %}
              {% if settings.core.SiteSettings.enable_tag_navigation %}
              {#{% include "patterns/basics/article-tags/article-tag_teaser.html" %}#}
                <div class="teaser-stacklist-tags-container">
                  <ul class="teaser-stacklist-tags">
                    {% for tag in tags %}
                    {% if not tag.title.20 %}
                      <li class="teaser-stacklist-tags__item">
                        <a href="{% url 'tags_list' tag.slug %}" class="teaser-stacklist-tags__anchor">{{ tag.title }}</a>
                      </li>
                      {% endif %}
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            {% endif %}
          </div>
        </li>
      </ul>
    </div>
  {% endif %}

  {% if self.get_parent_section.enable_recommended_section %}
  {% get_recommended_articles self as articles %}
    {% if articles %}
    <div class="article-teaser">
      <h3 class="heading heading--small related-articles__recommended">{% trans "You might like" %}</h3>
      <ul class="teaser-stacklist">
        {% for article in articles %}
        <li class="teaser-stacklist__item">
          {% if article.get_effective_image %}
          <a href="{% pageurl article.specific %}" class="base-teaser__thumbnail-link">
            {% image article.get_effective_image fill-96x96 as teaser_thumbnail %}
            <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="base-teaser__thumbnail" />
          </a>
          {% endif %}
          <div class="teaser-stacklist__item--content">
            {#{% include "patterns/basics/article-teasers/sp_variations/teaser-title.html" with layouttype="base" %}#}
            {% if article.title_highlight %}
              <h3 class="base-teaser__title base-teaser__title--highlight block-with-text">
                  <a href="{% pageurl article.specific %}" class="base-teaser__title-link">
                       {{ article.title_highlight|smarttruncatechars:45|safe}}
                  </a>
              </h3>
            {% else %}
              <h3 class="base-teaser__title block-with-text">
                  <a href="{% pageurl article.specific %}" class="base-teaser__title-link">
                      {{ article.title|smarttruncatechars:45|safe}}
                  </a>
              </h3>
            {% endif %}
            {% if article.subtitle_highlight or article.body_highlight %}
              <p class="carousel-teaser__subtitle highlight-description">
                {% if article.subtitle_highlight %}
                  {{article.subtitle_highlight|smarttruncatechars:28|safe}}
                {% elif article.body_highlight %}
                  {{article.body_highlight|smarttruncatechars:28|safe}}
                {% endif %}
              </p>
            {% elif article.subtitle %}
              <p class="base-teaser__subtitle block-with-text">
                {% if article.title.30 %}
                  {{ article.subtitle|smarttruncatechars:28|safe}}
                {% else %}
                  {{ article.subtitle|smarttruncatechars:50|safe}}
                {% endif %}
              </p>
            {% endif %}

            {% if article.is_commenting_enabled %}
              {% if comment_count > 0 %}
                <a href="{% pageurl article.specific %}?#comments" class="comment-counter{% if not article.allow_commenting %} comment-counter--disabled{% endif %}">
                  <img alt="Comments" srcset="{% static 'img/icons/comment.svg' %}" src="{% static 'img/icons/check@2x.png' %}" class="comment-counter__icon">
                  <span class="comment-counter__numeral">{{comment_count}}</span>
                </a>
              {% endif %}
            {% endif %}

            {% load_tags_for_article article as tags %}
            {% if tags %}
              {% if settings.core.SiteSettings.enable_tag_navigation %}
                <div class="teaser-stacklist-tags-container">
                  <ul class="teaser-stacklist-tags">
                    {% for tag in tags %}
                    {% if not tag.title.20 %}
                      <li class="teaser-stacklist-tags__item">
                        <a href="{% url 'tags_list' tag.slug %}" class="teaser-stacklist-tags__anchor">{{ tag.title }}</a>
                      </li>
                      {% endif %}
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            {% endif %}
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  {% endif %}
</div>
{% endblock %}