{#
================================================================================
Track Single Page Template (Kida-Native)
================================================================================

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

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- {% def %} for reusable section components
- {% while %} for progress indicator (Kida 2.0!)

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 %}

{# =============================================================================
   TRACK SECTION COMPONENT
   ============================================================================= #}
{% def track_section_block(item_page, index, is_last) %}
{% let section_prefix = "s" ~ index ~ "-" %}
{% let item_title = item_page?.title ?? 'Section' %}
{% let item_desc = item_page?.description ?? '' %}
{% let item_html = item_page?.html_content %}
{% let item_content = item_page?.content ?? '' %}
{% let item_href = item_page?.href ?? '#' %}

<section id="track-section-{{ index }}" class="track-section">
  {# Section Header #}
  <div class="track-section-header">
    <span class="track-section-number">{{ index }}</span>
    <div class="track-section-title-group">
      <h2 class="track-section-title">{{ item_title }}</h2>
      {% if item_desc %}
      <p class="track-section-description">{{ item_desc }}</p>
      {% end %}
    </div>
  </div>

  {# Section Content (headings demoted + IDs prefixed for uniqueness) #}
  {# resolve_links_for_embedding: relative links -> absolute so they work when embedded #}
  <div class="track-section-content">
    {% if item_html %}
    {{ item_html | resolve_links_for_embedding(item_page) | demote_headings | prefix_heading_ids(section_prefix) | safe }}
    {% elif item_content %}
    {{ item_content | resolve_links_for_embedding(item_page) | demote_headings | prefix_heading_ids(section_prefix) | safe }}
    {% else %}
    <div class="admonition warning">
      <p class="admonition-title">
        <span class="admonition-icon-wrapper">{{ icon("warning", size=20, css_class="admonition-icon") }}</span>
        <span class="admonition-title-text">Content Unavailable</span>
      </p>
      <p>This page has no content available.</p>
      <p class="track-section-fallback-link">
        <a href="{{ item_href }}" class="button button-primary button-sm">
          View Full Page: {{ item_title }} →
        </a>
      </p>
    </div>
    {% end %}
  </div>

  {# Track Complete Badge (only after final section) #}
  {% if is_last %}
  <div class="track-complete">
    <span class="badge badge-success track-complete__badge">✓ Track Complete</span>
  </div>
  {% end %}
</section>
{% end %}

{# =============================================================================
   MAIN TEMPLATE
   ============================================================================= #}

{% block content %}
{# Template-scoped variables #}
{% let track_id = params?.track_id ?? page?.slug ?? '' %}
{% let tracks_data = site?.data?.tracks ?? {} %}
{% let track = tracks_data[track_id] if track_id and track_id in tracks_data else none %}
{% let track_items = track?.items ?? [] %}
{% let track_title = track?.title ?? page?.title ?? 'Track' %}
{% let track_desc = track?.description ?? page?.description ?? '' %}
{% let page_toc_items = page?.toc_items ?? [] %}

{# PRE-COMPUTE all track item pages ONCE (used by sidebar + content + TOC) #}
{% let track_item_pages = {} %}
{% for item_slug in track_items %}
{% let item_page = get_page(item_slug) %}
{% if item_page %}
{% let track_item_pages = track_item_pages | merge({item_slug: item_page}) %}
{% end %}
{% end %}

{# 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">
    <article class="prose track-article">
      {% let hero_context = {
        'track_title': track_title,
        'track_desc': track_desc,
        'track_total': track_items | length
      } %}
      {% let _list_hero_default = 'track' %}
      {% include 'partials/page-hero.html' %}

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

      {# Render All Track Pages Sequentially (Pillar Page Content) #}
      {% if track and track_items | length > 0 %}
      <div class="track-content">
        {% for item_slug in track_items %}
        {# Use pre-computed page (O(1) lookup instead of get_page call) #}
        {% let item_page = track_item_pages[item_slug] if item_slug in track_item_pages else none %}
        {% if item_page %}
        {{ track_section_block(item_page, loop.index, loop.last) }}
        {% else %}
        {# Missing Page Warning #}
        <section id="track-section-{{ loop.index }}" class="track-section">
          <div class="admonition warning">
            <p class="admonition-title">
              <span class="admonition-icon-wrapper">{{ icon("warning", size=20, css_class="admonition-icon") }}</span>
              <span class="admonition-title-text">Section {{ loop.index }}: Page Not Found</span>
            </p>
            <p>Could not find page: <code>{{ item_slug }}</code></p>
          </div>
        </section>
        {% end %}
        {% end %}
      </div>
      {% elif not track %}
      <div class="admonition warning">
        <p class="admonition-title">
          <span class="admonition-icon-wrapper">{{ icon("warning", size=20, css_class="admonition-icon") }}</span>
          <span class="admonition-title-text">Track Not Found</span>
        </p>
        <p>Could not find a track definition with ID <code>{{ track_id }}</code> in
          <code>site/data/tracks.yaml</code>.</p>
        <hr>
        <p>Please ensure the page slug matches the track key, or set <code>track_id</code> in frontmatter.</p>
      </div>
      {% end %}
    </article>
  </div>

  {# Right Sidebar: TOC from all track sections #}
  {% if track and track_items | length > 0 %}
  {% let 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>
  {% end %}
  {% elif page_toc_items | length > 0 %}
  {# 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>
  {% end %}
</div>

{# Mobile sidebar toggle button #}
<button class="docs-sidebar-toggle" aria-label="Toggle navigation sidebar" aria-expanded="false"
        aria-controls="track-sidebar">
  {{ icon('list', size=20) }}
</button>

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