{#
=============================================================================
 post.html — Single Blog Post Layout (Singular Template)
=============================================================================

 This template is resolved by Moosey's Waterfall for individual blog
 posts (e.g., /posts/building-modern-apps). It provides a rich article
 layout with:

   • Full-width header with featured image overlay
   • Author avatar, publish date, and reading time
   • Article body with prose typography
   • Tags list from frontmatter
   • Breadcrumb navigation

 Waterfall Resolution (for /posts/building-modern-apps):
   1. Frontmatter override   →  (not set)
   2. Exact match            →  templates/posts/building-modern-apps.html (DNE)
   3. Singular parent        →  templates/post.html (USED! "posts" -> "post")
   4. Plural parent          →  templates/posts.html (listing layout)
   5. Fallback               →  templates/page.html

 Template Variables:
   {{ title }}       – from frontmatter or URL-derived
   {{ description }} – from frontmatter
   {{ content }}     – Markdown body rendered to HTML
   {{ date }}        – dict with {created: datetime, updated: datetime}
   {{ tags }}        – list from frontmatter "tags" key
   {{ image }}       – featured image URL from frontmatter "image" key
   {{ breadcrumbs }} – breadcrumb trail list
   {{ site_data }}   – global site data dict
   {{ slug }}        – URL-friendly slug of the page filename

 Filters Demonstrated:
   {{ date.created | fancy_date }}   – "13th Jan, 2026 at 6:00 PM"
   {{ content | read_time }}          – "5 min read"

 Extends: layout/base.html
=============================================================================
#}

{% extends "layout/base.html" %}

{% block content %}
<article>

    {#
       ================================================================
       POST HEADER
       ================================================================
       A dark header with:
         - Optional featured image as a dimmed background
         - Breadcrumbs centered above the title
         - Post title
         - Author avatar initial, author name, publish date, read time
    #}
    <header class="relative py-20 bg-slate-900">
        {#
             If the Markdown frontmatter has an "image" key, use it as a
             featured background image for the header. The opacity-30 class
             dims it so text remains readable.
        #}
        {% if image %}
        <img src="{{ image }}" alt="{{ title }}"
             class="absolute inset-0 w-full h-full object-cover opacity-30">
        {% endif %}

        <div class="relative max-w-3xl mx-auto px-4 text-center">

            {# -- Breadcrumbs -- #}
            {#
                 breadcrumbs is auto-generated from the URL:
                   /posts/building-modern-apps generates:
                     Home / Posts / Building Modern Apps
            #}
            <div class="flex justify-center gap-2 text-xs font-medium uppercase tracking-wider text-slate-400 mb-6"
                 aria-label="Breadcrumb">
                 {% for crumb in breadcrumbs %}
                    <a href="{{ crumb.url }}" class="hover:text-white transition">{{ crumb.name }}</a>
                    {% if not loop.last %}<span>/</span>{% endif %}
                {% endfor %}
            </div>

            {# -- Post title -- #}
            <h1 class="text-3xl md:text-5xl font-serif font-bold text-white mb-6 leading-tight">
                {{ title }}
            </h1>

            {# -- Post metadata (author, date, read time) -- #}
            {#
                 These demonstrate Moosey's template globals and filters:
                   - site_data.author  – from init_cms() site_data
                   - date.created     – file creation timestamp
                   - fancy_date       – formats datetime with ordinal suffix
                   - read_time        – estimates reading time at 200 wpm
                   - content          – the rendered Markdown body
            #}
            <div class="flex items-center justify-center gap-6 text-slate-300 text-sm">
                {# Author avatar initial #}
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xs">
                        {{ site_data.author[0] }}
                    </div>
                    <span>{{ site_data.author }}</span>
                </div>
                <span>&bull;</span>

                {#
                     fancy_date is a Moosey filter that formats dates with
                     ordinal suffixes: "21st Jan, 2026 at 6:00 PM"
                #}
                <time datetime="{{ date.created | iso_date }}">{{ date.created | fancy_date }}</time>
                <span>&bull;</span>

                {#
                     read_time calculates reading time at ~200 words per minute.
                     It operates on the raw {{ content }} text.
                #}
                <span>{{ content | read_time }}</span>
            </div>
        </div>
    </header>

    {#
       ================================================================
       POST BODY
       ================================================================
       The rendered Markdown content with enhanced prose styling.
    #}
    <div class="max-w-3xl mx-auto px-4 py-16">
        {#
             prose prose-lg prose-slate: Tailwind typography plugin classes
             for beautiful article typography.

             The additional prose-* overrides fine-tune heading fonts,
             link colours, and image styling.
        #}
        <div class="prose prose-lg prose-slate max-w-none
                    prose-headings:font-serif prose-headings:font-bold
                    prose-a:text-primary prose-img:rounded-xl prose-img:shadow-lg">
            {{ content | safe }}
        </div>

        {#
           ================================================================
           TAGS
           ================================================================
           If the Markdown frontmatter contains a "tags" list, render it
           below the article body.

           Example frontmatter in content/posts/building-modern-apps.md:
             tags: [fastapi, python, architecture]
        #}
        {% if tags %}
        <div class="mt-12 pt-8 border-t border-slate-200">
            <h4 class="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4">Filed Under</h4>
            <div class="flex flex-wrap gap-2">
                {% for tag in tags %}
                <span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-medium hover:bg-primary hover:text-white transition cursor-pointer">
                    #{{ tag }}
                </span>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</article>
{% endblock %}