{% extends "base.html" %}

{% load static wagtailimages_tags wagtailcore_tags %}

{% block content %}
<div id="main">
    <div class="container">
        {% if tag %}
            {% if page.image %}
                {% image page.image width-1000 as photo %}
                <div class="mb-3 image header-image" data-image='{{ photo.url }}'></div>
            {% endif %}
            <h1 class="display-5">{{ page.title }}</h1>
            <h5 class="my-3">Posts tagged with <a href="{% slugurl "blog" %}?tag={{ tag }}">#{{ tag }}</a></h5>
        {% else %}
            {% include "common/content.html" %}
        {% endif %}

        {% if page.body %}
            <hr />
        {% endif %}

        {% for child in blogs %}
            {% ifchanged %}
                <h3 class="mt-5" id="{{ child.get_date_group }}">
                    <a href="#{{ child.get_date_group }}" class="no-color-change">
                        <time datetime="{{ child.get_date_group }}">{{ child.get_date_group }}</time>
                    </a>
                </h3>
            {% endifchanged %}

            <div class="media list-page-item mb-3">
                <div class="d-none d-md-block align-self-center img-wrapper mr-3">
                    {% if child.image %}
                        <a href="{{ child.url }}">
                            {% image child.image width-300 as photo %}
                            <div class="image" data-image='{{ photo.url }}'></div>
                        </a>
                    {% endif %}
                </div>
                <div class="media-body">
                    <a href="{{ child.url }}">
                    <h5 class="my-0">{{ child.title }}</h5>
                    </a>
                    <small>{% include "common/content-details.html" with page=child %}</small>
                    <p>{{ child.get_short_body }}</p>
                </div>
            </div>
        {% endfor %}
    </div>
  </div>
{% endblock %}