{% extends "base.html" %}
{% load wagtailimages_tags core_tags %}
{% block content %}
  <div class="heading heading__square">
    <h1>{{self.title}}</h1>
  </div>
  {#{% include "patterns/basics/articles/article-page_variations/article-body.html" %}#}
  <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>
{% endblock %}