{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-blogindexpage{% endblock %}

{% block content %}
    <section class="flex flex-col items-center justify-center h-full mx-4">
        <h1>{{ page.title }}</h1>

        <div class="intro">{{ page.intro|richtext }}</div>
    </section>

    <section class="flex flex-col h-full mx-4">
        {% for post in blogpages %}
            {% with post=post.specific %}
                <article class="w-full flex flex-col items-center">
                    <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>

                    {% with post.main_image as main_image %}
                        {% if main_image %}{% image main_image width-400 class="blog" %}{% endif %}
                    {% endwith %}


                    <p>{{ post.intro }}</p>
                </article>
            {% endwith %}
        {% endfor %}
    </section>

{% endblock %}