{{!< default}}

{{#post}}
<article class="container mx-auto px-4 py-12">
    <header class="text-center mb-8">
        <h1 class="text-6xl font-bold tracking-tight text-[var(--text-primary)] mb-4">{{title fallback="No Title Provided"}}</h1>
        <section class="post-meta text-[var(--text-secondary)] text-lg">
            <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMMM DD, YYYY"}}</time>
            {{#if primary_tag}}
                <span class="mx-2">&bull;</span>
                <a href="{{primary_tag.url}}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition duration-200">{{primary_tag.name}}</a>
            {{/if}}
        </section>
    </header>

    {{#if feature_image}}
        <figure class="mb-12 rounded-lg overflow-hidden shadow-xl">
            <img
                class="w-full h-auto object-cover"
                src="{{img_url feature_image size="xl"}}"
                srcset="{{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(max-width: 1000px) 1000px, 2000px"
                alt="{{title fallback="No Title"}}"
            >
        </figure>
    {{/if}}

    <section class="post-content max-w-3xl mx-auto text-[var(--text-primary)] leading-relaxed text-lg prose prose-invert">
        {{content fallback="<p>No content provided for this post.</p>"}}
    </section>

    <footer class="mt-12 pt-8 border-t border-[var(--bg-tertiary)] text-center">
        <a href="/" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-[var(--text-primary)] bg-[var(--brand-primary)] hover:bg-[var(--brand-secondary)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--brand-primary)] transition duration-200">
            &larr; Back to Home
        </a>
    </footer>
</article>
{{/post}}