{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

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

{% block content %}

    <section class="py-24 sm:py-32 mx-4">
        <div class="mx-auto max-w-7xl px-0 md:px-4 lg:px-8">
            <div class="mx-auto max-w-2xl lg:max-w-4xl">
                <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 text-lg 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 aspect-[16/9]">
                                        {% with post.main_image as main_image %}
                                            {% if main_image %}
                                                {% image main_image width-800 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% 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>
        </div>
    </section>

{% endblock %}