{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

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

{% block content %}

    <section class="px-1 md:px-4 lg:px-8">

        <div class="mx-auto max-w-xl lg:max-w-2xl">
            <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h1>
            <div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div>

            <div class="mt-16 space-y-20 lg:mt-20 blog-pages">
                {% for post in blogpages %}
                    {% with post=post.specific %}
                        <article class="relative isolate flex flex-col gap-8">
                            <div class="group relative w-full">
                                <h2 class="mt-3 font-semibold leading-6 group-hover:text-klavender border-klavender border-b-4">
                                    <a href="{% pageurl post %}">
                                        <span class="absolute inset-0"></span>
                                        {{ post.title }}
                                    </a>
                                </h2>
                                <p class="mt-5 leading-6">{{ post.intro }}</p>
                            </div>
                            {% if post.main_image %}
                                <div class="relative mx-auto">
                                    {% with post.main_image as main_image %}
                                        {% if main_image %}
                                            {% image main_image width-1600 class="blog" %}{% endif %}
                                    {% endwith %}
                                    <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                                </div>
                            {% endif %}
                            <div class="flex-col items-center text-xs">
                                <div class="space-x-2 text-left"><span class="emoji"
                                                                       aria-hidden="true">🕘</span>
                                    <time class="text-sm"
                                          datetime="{{ post.date|date:"Y-m-d" }}">{{ post.date }}</time>
                                </div>

                                {% with tags=post.tags.all %}
                                    {% if tags %}
                                        <div class="tags mt-2">
                                            <h3 class="sr-only">Tags</h3>
                                            <ul class="flex">
                                                {% for tag in tags %}
                                                    <li class="lg:space-x-2"><span class="emoji">🏷️</span>
                                                        <a class="pr-2"
                                                           href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    {% endif %}
                                {% endwith %}
                            </div>
                        </article>
                    {% endwith %}
                {% endfor %}

            </div>
        </div>
    </section>

{% endblock %}