{#
Track Single Page Template

Pillar page-style layout for learning tracks with:
- Left sidebar: Other tracks + progress
- Center: Track content (pillar page style)
- Right sidebar: TOC from all track sections

Usage: Set `template: tracks/single.html` in frontmatter
Or set `type: track` to auto-select this template
#}

{% extends "base.html" %}
{% from 'partials/navigation-components.html' import toc with context %}

{% block content %}
{% set track_id = page.metadata.get('track_id') or page.slug %}
{% set track = site.data.tracks[track_id] if (track_id and site.data.tracks and track_id in site.data.tracks) else none %}

{# Three-column pillar page layout #}
<div class="docs-layout track-layout">
    {# Left Sidebar: Track Navigation + Progress #}
    <aside class="docs-sidebar track-sidebar-container" id="track-sidebar" role="navigation"
        aria-label="Track navigation">
        {% include 'partials/track-sidebar.html' %}
    </aside>

    {# Main Content: Pillar Page Style #}
    <div class="docs-main track-main">
        {# Track Header #}
        <article class="prose track-article">
            <header class="page-header track-header">
                <span class="badge bg-primary mb-3">Learning Track</span>
                <h1>{{ page.title or (track.title if track else 'Track') }}</h1>

                {% if page.description or (track.description if track else None) %}
                <p class="lead text-muted mt-3">
                    {{ page.description or (track.description if track else '') }}
                </p>
                {% endif %}
            </header>

            {# Main Page Content (Introduction) #}
            {% if content %}
            <div class="track-intro mb-5">
                {{ content | safe }}
            </div>
            {% endif %}

            {# Track Contents Overview (Compact) #}
            {% if track and track.items %}
            <div class="track-contents-overview mb-5">
                <h2 class="h5 mb-3">Track Contents</h2>
                <div class="track-contents-list">
                    {% for item_slug in track.items %}
                    {% set item_page = get_page(item_slug) %}
                    {% if item_page %}
                    <a href="#track-section-{{ loop.index }}" class="track-contents-item">
                        <span class="track-contents-number">{{ loop.index }}</span>
                        <div class="track-contents-content">
                            <div class="track-contents-title">{{ item_page.title }}</div>
                            {% if item_page.description %}
                            <div class="track-contents-desc">{{ item_page.description }}</div>
                            {% endif %}
                        </div>
                    </a>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {# Render All Track Pages Sequentially (Pillar Page Content) #}
            {% if track and track.items %}
            <div class="track-content">
                {% for item_slug in track.items %}
                {% set item_page = get_page(item_slug) %}

                {% if item_page %}

                <section id="track-section-{{ loop.index }}" class="track-section">
                    {# Section Header #}
                    <div class="track-section-header">
                        <span class="track-section-number">{{ loop.index }}</span>
                        <div class="track-section-title-group">
                            <h2 class="track-section-title">{{ item_page.title }}</h2>
                            {% if item_page.description %}
                            <p class="track-section-description">{{ item_page.description }}</p>
                            {% endif %}
                        </div>
                    </div>

                    {# Section Content #}
                    <div class="track-section-content">
                        {% if item_page.parsed_ast %}
                        {# Use parsed_ast and update heading IDs to be unique #}
                        {# Note: In a real implementation, you'd want to update heading IDs here #}
                        {{ item_page.parsed_ast | safe }}
                        {% elif item_page.content %}
                        {# Fallback to rendered content if parsed_ast not available #}
                        {{ item_page.content | safe }}
                        {% else %}
                        <div class="alert alert-warning">
                            <p><strong>Content Unavailable</strong></p>
                            <p>This page has no content available.</p>
                            <p class="mb-0">
                                <a href="{{ item_page.url }}" class="btn btn-sm btn-primary">
                                    View Full Page: {{ item_page.title }} →
                                </a>
                            </p>
                        </div>
                        {% endif %}
                    </div>

                    {# Section Navigation #}
                    <div class="track-section-nav">
                        {% if loop.index > 1 %}
                        {% set prev_slug = track.items[loop.index - 2] %}
                        {% set prev_page = get_page(prev_slug) %}
                        {% if prev_page %}
                        <a href="#track-section-{{ loop.index - 1 }}" class="btn btn-outline-primary btn-sm">
                            &larr; Previous: {{ prev_page.title }}
                        </a>
                        {% endif %}
                        {% else %}
                        <span></span>
                        {% endif %}

                        {% if not loop.last %}
                        {% set next_slug = track.items[loop.index] %}
                        {% set next_page = get_page(next_slug) %}
                        {% if next_page %}
                        <a href="#track-section-{{ loop.index + 1 }}" class="btn btn-primary btn-sm">
                            Next: {{ next_page.title }} &rarr;
                        </a>
                        {% endif %}
                        {% else %}
                        <div class="text-center flex-grow-1">
                            <span class="badge bg-success fs-6 px-3 py-2">
                                ✓ Track Complete
                            </span>
                        </div>
                        {% endif %}
                    </div>
                </section>
                {% else %}
                {# Missing Page Warning #}
                <section id="track-section-{{ loop.index }}" class="track-section">
                    <div class="alert alert-warning">
                        <h3 class="h5">Section {{ loop.index }}: Page Not Found</h3>
                        <p class="mb-0">Could not find page: <code>{{ item_slug }}</code></p>
                    </div>
                </section>
                {% endif %}
                {% endfor %}
            </div>
            {% elif not track %}
            <div class="alert alert-warning">
                <h4 class="alert-heading">Track Not Found</h4>
                <p>Could not find a track definition with ID <code>{{ track_id }}</code> in
                    <code>site/data/tracks.yaml</code>.
                </p>
                <hr>
                <p class="mb-0">Please ensure the page slug matches the track key, or set <code>track_id</code> in
                    frontmatter.</p>
            </div>
            {% endif %}
        </article>
    </div>

    {# Right Sidebar: TOC from all track sections #}
    {# Combine TOC items from all track section pages #}
    {% if track and track.items %}
        {% set combined_toc_items = combine_track_toc(track.items) %}
        {% if combined_toc_items %}
        <aside class="docs-toc" role="complementary" aria-label="Table of contents">
            {{ toc(toc_items=combined_toc_items, page=page) }}
        </aside>
        {% endif %}
    {% elif page.toc_items %}
    {# Fallback to page TOC if no track sections #}
    <aside class="docs-toc" role="complementary" aria-label="Table of contents">
        {{ toc(toc_items=page.toc_items, page=page) }}
    </aside>
    {% endif %}
</div>

{# Mobile sidebar toggle button #}
<button class="docs-sidebar-toggle" aria-label="Toggle navigation sidebar" aria-expanded="false"
    aria-controls="track-sidebar">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
</button>

{# Mobile sidebar overlay #}
<div class="docs-sidebar-overlay" aria-hidden="true"></div>
{% endblock %}