{% extends "base.html" %}

{% from 'partials/navigation-components.html' import breadcrumbs, page_navigation with context %}
{% from 'partials/content-components.html' import tag_list, random_posts with context %}

{% block content %}
{{ breadcrumbs(page) }}

<div class="page-layout {% if toc %}page-with-toc{% endif %}">
    <article class="page prose {% if page.metadata.get('css_class') %}{{ page.metadata.get('css_class') }}{% endif %}">
        <header class="page-header">
            <h1>{{ page.title }}</h1>

            {% if page.date or page.metadata.get('author') %}
            <div class="article-meta">
                {% if page.date %}
                <time datetime="{{ page.date | date_iso }}" title="{{ page.date | dateformat('%B %d, %Y') }}">
                    {{ page.date | time_ago }}
                </time>
                {% endif %}

                {% if page.metadata.get('author') %}
                <span class="author">
                    <span>By {{ page.metadata.get('author') }}</span>
                </span>
                {% endif %}

                {% if page.content %}
                <span class="reading-time">
                    {{ reading_time }} min read
                </span>
                {% endif %}
            </div>
            {% endif %}
        </header>

        <div class="page-content">
            {{ content | safe }}
        </div>

        {% if page.tags %}
        <footer class="page-footer">
            <div class="tags">
                <strong>Tags:</strong>
                {{ tag_list(page.tags) }}
            </div>
        </footer>
        {% endif %}
    </article>

    {% if toc %}
    <aside class="page-sidebar">
        <nav class="toc" aria-label="Table of contents">
            <h2 class="toc-title">On This Page</h2>
            <div class="toc-content">
                {{ toc | safe }}
            </div>
        </nav>

        {# Random posts - dogfooding sample() #}
        {{ random_posts(count=3) }}
    </aside>
    {% endif %}
</div>

{# Page Navigation (prev/next) #}
{{ page_navigation(page) }}

{# Related Posts Section (for pages with tags) - Pre-computed during build #}
{% set related = page.related_posts[:3] %}
{% if related %}
<aside class="related-posts">
    <div class="container">
        <h2>Related Posts</h2>
        <div class="related-posts-grid">
            {% for post in related %}
            <article class="related-post-card">
                <h3><a href="{{ url_for(post) }}">{{ post.title }}</a></h3>
                {% if post.date %}
                <time datetime="{{ post.date | date_iso }}">{{ post.date | time_ago }}</time>
                {% endif %}
                {% if post.content %}
                <p>{{ post.excerpt }}</p>
                {% endif %}
            </article>
            {% endfor %}
        </div>
    </div>
</aside>
{% endif %}
{% endblock %}