{% load wagtailmarkdown %}
<div data-theme="light" {% if blog_background_color %}style="background: {{ blog_background_color }}"{% endif %}>
    <main class="mx-auto w-full max-w-5xl px-4 py-8 pb-20 sm:px-6 sm:pb-24 lg:px-8 lg:py-12 lg:pb-28">
        <header class="border-y border-base-300/70 py-12 sm:py-14">
            <div class="mx-auto max-w-3xl text-center">
                <h1 class="text-3xl font-semibold tracking-tight text-base-content sm:text-4xl lg:text-5xl">{{ page.title }}</h1>
            </div>

            {% if page.image_url %}
                <div class="mx-auto mt-10 max-w-4xl">
                    <img src="{{ page.image_url }}"
                         alt="{{ page.title }}"
                         class="aspect-[16/9] w-full rounded-box object-cover">
                </div>
            {% endif %}

            <div class="mx-auto mt-8 max-w-4xl border-t border-base-300/70 pt-6">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        {% if author_image %}
                            <img src="{{ author_image }}"
                                 class="h-10 w-10 rounded-xl object-cover"
                                 alt="{{ page.author_name }} avatar">
                        {% endif %}
                        <div>
                            <p class="text-sm">
                                <b>{{ page.author_name }}</b>
                            </p>
                            <p class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
                                <span>{{ page.date }}</span>
                                <span class="hidden sm:inline">/</span>
                                <span>{{ page.readtime }}</span>
                            </p>
                        </div>
                    </div>
                    {% if page.canonical_url %}
                        <a class="btn btn-outline btn-sm"
                           href="{{ page.canonical_url }}"
                           target="_blank"
                           rel="noopener noreferrer">Original post</a>
                    {% endif %}
                </div>
            </div>
        </header>

        <article class="prose mx-auto pt-10 sm:pt-12">{{ page.body|markdown }}</article>
    </main>
</div>