{% extends "base.html" %}

{#
================================================================================
Tutorial List Template (Kida-Native)
================================================================================

Tutorial section index with difficulty levels, time estimates, and grid layout.

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

USAGE:
Set `type: tutorial` in section _index.md
================================================================================
#}

{% from 'partials/navigation-components.html' import breadcrumbs %}

{# =============================================================================
   TUTORIAL CARD COMPONENT
   ============================================================================= #}
{% def tutorial_card(tutorial) %}
{% let tut_meta = tutorial?.metadata ?? {} %}
{% let tut_title = tutorial?.title ?? 'Tutorial' %}
{% let tut_href = tutorial?.href ?? tutorial?._path ?? '#' %}
{% let tut_icon = tut_meta?.icon ?? 'book' %}
{% let tut_desc = tut_meta?.description ?? tutorial?.excerpt ?? '' %}
{% let tut_difficulty = tut_meta?.difficulty ?? '' %}
{% let tut_time = tut_meta?.time ?? tut_meta?.duration ?? '' %}
{% let tut_prereqs = tut_meta?.prerequisites ?? [] %}

<article class="tutorial-card gradient-border fluid-combined">
  <div class="tutorial-card-header">
    <span class="tutorial-icon">{{ tut_icon }}</span>
    <h3 class="tutorial-title">
      <a href="{{ tut_href }}">{{ tut_title }}</a>
    </h3>
  </div>

  <div class="tutorial-card-content">
    {% if tut_desc %}
    <p class="tutorial-description">{{ tut_desc | excerpt_for_card(tut_title) | excerpt(150) }}</p>
    {% end %}

    <div class="tutorial-meta">
      {# Difficulty Badge #}
      {% if tut_difficulty %}
      <span class="tutorial-badge tutorial-badge-{{ tut_difficulty }}">
        {{ tut_difficulty | capitalize }}
      </span>
      {% end %}

      {# Time Estimate #}
      {% if tut_time %}
      <span class="tutorial-meta-item">
        {{ icon('clock', size=14) }} {{ tut_time }}
      </span>
      {% end %}

      {# Prerequisites #}
      {% if tut_prereqs | length > 0 %}
      <span class="tutorial-meta-item">
        {{ icon('check-circle', size=14) }}
        {{ tut_prereqs | length }} prerequisite{{ 's' if tut_prereqs | length != 1 else '' }}
      </span>
      {% end %}
    </div>

    <a href="{{ tut_href }}" class="tutorial-link">Start tutorial →</a>
  </div>
</article>
{% end %}

{# =============================================================================
   SUBSECTION CARD COMPONENT
   ============================================================================= #}
{% def subsection_card(subsection) %}
{% let sub_title = subsection?.title ?? 'Category' %}
{% let sub_href = subsection?.href ?? subsection?._path ?? '#' %}
{% let sub_desc = subsection?.metadata?.description ?? '' %}
{% let sub_pages = subsection?.regular_pages ?? [] %}
{% let index_page = subsection?.index_page %}
{% let index_path = index_page?._path ?? '' %}
{% let content_pages = sub_pages |> rejectattr('relative_url', 'eq', index_path) |> list %}
{% let page_count = content_pages | length %}

<article class="tutorial-card gradient-border fluid-combined">
  <div class="tutorial-card-header">
    <span class="tutorial-icon">📁</span>
    <h3 class="tutorial-title">
      <a href="{{ sub_href }}">{{ sub_title }}</a>
    </h3>
  </div>

  <div class="tutorial-card-content">
    {% if sub_desc %}
    <p class="tutorial-description">{{ sub_desc | excerpt_for_card(sub_title) | excerpt(150) }}</p>
    {% end %}

    <div class="tutorial-meta">
      {% if page_count > 0 %}
      <span class="tutorial-meta-item">
        {{ page_count }} tutorial{{ 's' if page_count != 1 else '' }}
      </span>
      {% end %}
    </div>
  </div>
</article>
{% end %}

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

{% block content %}
{# Template-scoped variables #}
{% let section_title = section?.title ?? title ?? 'Tutorials' %}
{% let section_desc = section?.metadata?.description ?? description ?? '' %}
{% let tutorial_posts = posts ?? [] %}
{% let tutorial_subsections = subsections ?? [] %}

<div class="container">
  {# Action Bar: Breadcrumbs + Share #}
  {% include 'partials/action-bar.html' %}

  <div class="tutorial-container">
    <header class="page-header page-header--centered">
      <h1>{{ section_title }}</h1>

      {% if section_desc %}
      <p class="tutorial-description">{{ section_desc }}</p>
      {% else %}
      <p class="tutorial-description">Step-by-step guides to help you learn and master the topics.</p>
      {% end %}
    </header>

    {# Tutorial Statistics #}
    {% if tutorial_posts | length > 0 %}
    {% let beginner_count = tutorial_posts |> where('metadata.difficulty', 'beginner') |> length %}
    {% let intermediate_count = tutorial_posts |> where('metadata.difficulty', 'intermediate') |> length %}
    {% let advanced_count = tutorial_posts |> where('metadata.difficulty', 'advanced') |> length %}

    <div class="tutorial-stats">
      <div class="tutorial-stat">
        <strong>{{ tutorial_posts | length }}</strong>
        <span>{{ 'tutorial' if tutorial_posts | length == 1 else 'tutorials' }}</span>
      </div>

      {% if beginner_count > 0 %}
      <div class="tutorial-stat">
        <strong>{{ beginner_count }}</strong>
        <span>beginner</span>
      </div>
      {% end %}

      {% if intermediate_count > 0 %}
      <div class="tutorial-stat">
        <strong>{{ intermediate_count }}</strong>
        <span>intermediate</span>
      </div>
      {% end %}

      {% if advanced_count > 0 %}
      <div class="tutorial-stat">
        <strong>{{ advanced_count }}</strong>
        <span>advanced</span>
      </div>
      {% end %}
    </div>
    {% end %}

    {# Tutorial Grid #}
    {% if tutorial_posts | length > 0 or tutorial_subsections | length > 0 %}
    <div class="tutorial-content">

      {# Subsections (Tutorial Categories) #}
      {% if tutorial_subsections | length > 0 %}
      <section class="tutorial-section">
        <h2 class="tutorial-section-title">Categories</h2>
        <div class="tutorial-grid stagger-fade-in">
          {% for subsection in tutorial_subsections %}
          {{ subsection_card(subsection) }}
          {% end %}
        </div>
      </section>
      {% end %}

      {# Individual Tutorials #}
      {% if tutorial_posts | length > 0 %}
      <section class="tutorial-section">
        <h2 class="tutorial-section-title">All Tutorials</h2>
        <div class="tutorial-grid stagger-fade-in">
          {% for tutorial in tutorial_posts %}
          {{ tutorial_card(tutorial) }}
          {% end %}
        </div>
      </section>
      {% end %}
    </div>
    {% else %}
    {# Empty State #}
    <div class="tutorial-empty">
      <p>No tutorials available yet.</p>
    </div>
    {% end %}
  </div>
</div>
{% end %}