{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

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

{% block content %}
    <section class="flex flex-col items-center justify-center h-full max-w-7xl px-0 md:px-4 lg:px-8">
        <article class="mb-16 max-w-7xl px-0 md:px-4 lg:px-8">
            <h1>{{ page.title }}</h1>

            {% with authors=page.authors.all %}
                {% if authors %}
                    <h2 class="sr-only">Posted by:</h2>
                    <ul>
                        {% for author in authors %}
                            <li style="display: inline">
                                <div class="group block flex-shrink-0">
                                    <div class="flex items-center">
                                        <div>
                                            {% image author.author_image fill-168x168 class="inline-block h-14 w-14 rounded-full" %}
                                        </div>
                                        <div class="ml-3">
                                            <p class="text-sm font-medium m-0"> {{ author.name }}</p>
                                            <p class="space-x-2 m-0 mt-1 text-left"><span class="emoji"
                                                                                          aria-hidden="true">🕘</span>
                                                <time class="text-sm"
                                                      datetime="{{ page.date|date:"Y-m-d" }}">{{ page.date }}</time>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endwith %}


            <div class="blog-content w-full px-2 lg:px-4">
                <div class="my-6 text-lg font-medium">{{ page.intro }}</div>

                {{ page.body }}

                <div class="flex">
                    {% for item in page.gallery_images.all %}
                        <div class="m-4">
                            {% image item.image fill-320x240 %}
                            <p>{{ item.caption }}</p>
                        </div>
                    {% endfor %}
                </div>


                {% with tags=page.tags.all %}
                    {% if tags %}
                        <div class="flex items-center gap-x-4 text-xs">
                            <div class="tags">
                                <h2 class="sr-only">Tags</h2>
                                <ul class="flex">
                                    {% for tag in tags %}
                                        <li class="space-x-2"><span class="emoji">🏷️</span>
                                            <a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>

                    {% endif %}
                {% endwith %}
            </div>


        </article>

        <nav class="w-full text-center px-2 lg:px-4">
            <a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
        </nav>

    </section>

{% endblock %}