{#
=============================================================================
 page.html — Generic Page Layout (Global Fallback)
=============================================================================

 This is the "fallback" template in Moosey's Waterfall resolution.
 When no more specific template is found (no exact match, no singular
 or plural match), this template is used.

 It provides:
   • Left sidebar with sibling navigation (nav_items)
   • Breadcrumb trail
   • Title and description from frontmatter
   • Rendered Markdown content

 Waterfall Resolution (when visiting /about):
   1. Frontmatter override  →  template: special.html (if set)
   2. Exact match           →  templates/about.html (does not exist)
   3. Singular parent       →  templates/page.html (used! /about -> "page")
   4. Plural parent         →  (skipped)
   5. Fallback              →  templates/page.html (same file)

 Template Variables:
   {{ title }}       – from frontmatter or derived from URL segment
   {{ description }} – from frontmatter
   {{ content }}     – Markdown rendered to HTML
   {{ breadcrumbs }} – list of {"name": str, "url": str}
   {{ nav_items }}   – list of sibling pages in the same content dir
   {{ mode }}        – "development" | "production" | …
   {{ request }}     – FastAPI Request object

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

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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="flex flex-col sm:flex-row gap-12">

        {#
           ================================================================
           SIDEBAR (sibling navigation via nav_items)
           ================================================================

           nav_items is automatically populated by Moosey with the siblings
           of the current page (files in the same content directory, sorted
           by frontmatter "order" then by name).

           Each item in nav_items is a dict:
             .name       – display title (nav_title > title > filename)
             .url        – absolute URL path
             .is_active  – True if this entry's URL matches the current page
             .is_dir     – True if this entry is a directory (section index)
             .order      – sort weight from frontmatter
             .group      – group name for section headings
             .target     – "_self" or "_blank" (for external links)
             .metadata   – full frontmatter dict of the entry

           When nav_items is empty (no siblings), the sidebar is hidden.
           ================================================================
        #}
        {% if nav_items %}
        <aside class="md:w-[20%] flex-shrink-0 bg-slate-50 p-5 ">
            <div class="sticky top-24">
                <h3 class="font-bold text-lg mt-0 mb-4 text-slate-900">Contents</h3>
                <nav class="space-y-1">
                    {% for item in nav_items %}
                    {#
                         Each link gets the "active" class when item.is_active
                         is True. External links (item.target == "_blank") use
                         target="_blank" rel="noopener noreferrer".
                    #}
                    <a href="{{ item.url }}"
                       class="block px-3 py-2 rounded-lg text-sm font-medium transition
                              {% if item.is_active %}bg-blue-50 text-primary{% else %}text-slate-600 hover:bg-slate-50{% endif %}"
                       {% if item.target == '_blank' %}target="_blank" rel="noopener noreferrer"{% endif %}>
                        {{ item.name }}
                    </a>
                    {% endfor %}
                </nav>
            </div>
        </aside>
        {% endif %}

        {#
           ================================================================
           MAIN CONTENT AREA
           ================================================================
        #}
        <div class="flex-grow min-w-0">

            {# -- Breadcrumbs -- #}
            {#
               breadcrumbs is an auto-generated list from the URL path.
               Example for /pages/guides/farming:
                 [{"name": "Home", "url": "/"},
                  {"name": "Pages", "url": "/pages"},
                  {"name": "Guides", "url": "/pages/guides"},
                  {"name": "Farming", "url": "/pages/guides/farming"}]

               The last crumb is not linked (it's the current page).
            #}
            <div class="mb-8">
                <nav class="text-sm text-slate-500 mb-4" aria-label="Breadcrumb">
                    {% for crumb in breadcrumbs %}
                        <a href="{{ crumb.url }}" class="hover:text-primary">{{ crumb.name }}</a>
                        {% if not loop.last %} / {% endif %}
                    {% endfor %}
                </nav>

                {# -- Page title -- #}
                {#
                     {{ title }} is resolved from:
                       1. Frontmatter "title" key in the Markdown file
                       2. Derived from the URL segment (title-cased)
                #}
                <h1 class="text-4xl font-serif font-bold text-slate-900">{{ title }}</h1>

                {# -- Page description (optional) -- #}
                {#
                     If the Markdown frontmatter has a "description" key,
                     it is rendered below the title. Useful for SEO.
                #}
                {% if description %}
                <p class="mt-4 text-xl text-slate-500">{{ description }}</p>
                {% endif %}
            </div>

            {# -- Rendered Markdown Content -- #}
            {#
                 {{ content }} contains the Markdown file body rendered to
                 HTML via the Moosey markdown parser (which supports tables,
                 task lists, emojis, syntax highlighting, and admonitions).

                 | safe is required because the content is pre-rendered HTML.
                 Without it, Jinja2 would escape the HTML tags.

                 Security: Content was processed through Jinja2's
                 SandboxedEnvironment, so even with | safe the output is safe.
            #}
            <div class="prose prose-lg prose-slate max-w-none">
                {{ content | safe }}
            </div>
        </div>
    </div>
</div>
{% endblock %}