{% 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 %}
{# Action Bar: Breadcrumbs + Share #}
{% include 'partials/action-bar.html' %}

<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>
        </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="{{ post.permalink }}">{{ 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 %}