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

Beautiful grid layout for displaying all available learning tracks.

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- {% def %} for reusable track card component
- Pipeline operator (|>) for filter chains

USAGE:
Set `template: tracks/list.html` in frontmatter
================================================================================
#}

{% extends "base.html" %}

{# =============================================================================
TRACK CARD COMPONENT (Compact LMS Style)
============================================================================= #}
{% def track_card(id, track, track_page) %}
{% let track_title = track?.title ?? 'Track' %}
{% let track_desc = track?.description ?? 'Start your learning journey with this comprehensive track.' %}
{% let track_items = track?.items ?? [] %}
{% let items_count = track_items | length %}
{% let preview_limit = 2 %}

<article class="track-card track-card--compact gradient-border fluid-combined">
    {# Card Header - Title + Lesson Count Inline #}
    <div class="track-card-header">
        <div class="track-card-icon">
            {{ icon('graduation-cap', size=20) }}
        </div>
        <h2 class="track-card-title">
            {% if track_page %}
            <a href="{{ track_page.href }}">{{ track_title }}</a>
            {% else %}
            {{ track_title }}
            {% end %}
        </h2>
        <span class="track-card-count">{{ items_count }} lesson{{ 's' if items_count != 1 else '' }}</span>
    </div>

    {# Card Content #}
    <div class="track-card-content">
        <p class="track-card-description">{{ track_desc }}</p>

        {# Track Preview Items - Horizontal Chips #}
        {% if items_count > 0 %}
        <div class="track-card-preview">
            <div class="track-preview-chips">
                {% for item_slug in track_items[:preview_limit] %}
                {% let item_page = get_page(item_slug) %}
                {% let item_title = item_page?.title ?? item_slug %}
                <span class="track-preview-chip">
                    <span class="track-preview-chip-num">{{ loop.index }}</span>
                    {{ item_title }}
                </span>
                {% end %}
                {% if items_count > preview_limit %}
                <span class="track-preview-chip track-preview-chip--more">+{{ items_count - preview_limit }} more</span>
                {% end %}
            </div>
        </div>
        {% end %}
    </div>

    {# Card Footer #}
    <div class="track-card-footer">
        {% if track_page %}
        <a href="{{ track_page.href }}" class="track-card-button">
            Start Learning {{ icon('arrow-right', size=14) }}
        </a>
        {% elif items_count > 0 %}
        {% let first_slug = track_items[0] %}
        {% let first_page = get_page(first_slug) %}
        {% if first_page %}
        <a href="{{ first_page.href }}" class="track-card-button">
            Start Learning {{ icon('arrow-right', size=14) }}
        </a>
        {% else %}
        <span class="track-card-button track-card-button-disabled" title="Track page not found">Unavailable</span>
        {% end %}
        {% else %}
        <span class="track-card-button track-card-button-disabled" title="No track items">Unavailable</span>
        {% end %}
    </div>
</article>
{% end %}

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

{% block content %}
{# Template-scoped variables #}
{% let page_title = page?.title ?? 'Learning Tracks' %}
{% let page_desc = page?.description ?? '' %}
{% let tracks_data = site?.data?.tracks ?? {} %}

{# PRE-COMPUTE track_id → page mapping ONCE (O(n) instead of O(n×m)) #}
{% let site_pages = site?.pages ?? [] %}
{% let track_page_map = {} %}
{% for p in site_pages %}
{% let tid = p?.metadata?.track_id ?? '' %}
{% if tid %}
{% let track_page_map = track_page_map | merge({tid: p}) %}
{% end %}
{% end %}

<div class="container py-5">
    {# Minimal Header - Title + optional description #}
    <header class="tracks-header tracks-header--compact mb-5">
        <h1 class="tracks-title">{{ page_title }}</h1>
        {% if page_desc %}
        <p class="tracks-lead">{{ page_desc }}</p>
        {% end %}
    </header>

    {# Tracks Grid #}
    {% if tracks_data | length > 0 %}
    <div class="tracks-grid">
        {% for id, track in tracks_data | items %}
        {# O(1) lookup from pre-computed map #}
        {% let track_page = track_page_map[id] if id in track_page_map else none %}
        {{ track_card(id, track, track_page) }}
        {% end %}
    </div>
    {% else %}
    {# Empty State #}
    <div class="tracks-empty">
        <div class="tracks-empty-icon">
            {{ icon('graduation-cap', size=64) }}
        </div>
        <h3 class="tracks-empty-title">No tracks defined</h3>
        <p class="tracks-empty-text">
            Please define your learning tracks in <code>site/data/tracks.yaml</code>.
        </p>
    </div>
    {% end %}
</div>
{% end %}