{% load wagtailcore_tags core_tags wagtailimages_tags static comments gem_tags molo_forms_tags %}
{% 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 article as comment_count %}
      {% if article.is_commenting_enabled %}
        {% if comment_count > 0 %}
          <a href="/" class="comment-counter{% if not article.allow_commenting %} comment-counter--disabled{% endif %} comment-counter--carousel">
            <img alt="Comments" srcset="{% static 'img/icons/check.svg' %}" src="{% static 'img/icons/check@2x.png' %}" class="comment-counter__icon">
            <span class="comment-counter__numeral">{{comment_count}}</span>
            <span class="comment-counter__numeral comment-counter__numeral--plural">
              {% trans "comment" %}{{comment_count|pluralize}}
            </span>
          </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>
    {% social_media_article page=self %}

  {% forms_list_linked_to_pages self %}