{% extends "base.html" %}

{#
================================================================================
Changelog/Release Notes Template (Kida-Native)
================================================================================

Changelog and release notes section with timeline format.

MODES:
1. Data-driven: All releases in data/changelog.yaml
2. Page-driven: Each release as a separate markdown file

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- {% def %} for reusable release components
- {% match %} for category rendering
- {% while %} for version history traversal (Kida 2.0!)

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

{# =============================================================================
CHANGE CATEGORY COMPONENT
============================================================================= #}
{% def change_category(title, icon, items, is_breaking=false) %}
{% if items and items | length > 0 %}
<div class="{{ ['changelog-category', 'changelog-category--breaking' if is_breaking] | classes }}">
  <h3 class="{{ ['category-title', 'category-title--breaking' if is_breaking] | classes }}">{{ icon }} {{ title }}</h3>
  <ul class="changelog-list{{ ' changelog-list--breaking' if is_breaking else '' }}">
    {% for item in items %}
    <li class="{{ 'changelog-item--breaking' if is_breaking else '' }}">{{ item }}</li>
    {% end %}
  </ul>
</div>
{% end %}
{% end %}

{# =============================================================================
RELEASE ITEM COMPONENT - Unified with ReleaseView
============================================================================= #}
{% def release_item(rel) %}
<div class="timeline-item" data-change-types="{{ rel.change_types | join(' ') }}">
  <div class="timeline-header">
    <div class="timeline-title-group">
      <h2 class="timeline-title">
        {% if rel.href %}
        <a href="{{ rel.href }}">{{ rel.version }}</a>
        {% else %}
        {{ rel.version }}
        {% end %}
      </h2>
      {% if rel.name %}
      <p class="timeline-subtitle">{{ rel.name }}</p>
      {% end %}
    </div>
    <div class="timeline-meta">
      {% if rel.date %}
      <span class="timeline-date">{{ rel.date }}</span>
      {% end %}
      {% if rel.status %}
      <span class="release-status status-{{ rel.status | lower }}">{{ rel.status }}</span>
      {% end %}
    </div>
  </div>

  {% let rel_summary = rel.summary | excerpt_for_card(rel.version, rel.name) | excerpt(160) %}
  {% if rel_summary %}
  <p class="timeline-description">{{ rel_summary }}</p>
  {% end %}

  {{ change_category('Added', '', rel.added) }}
  {{ change_category('Changed', '', rel.changed) }}
  {{ change_category('Fixed', '', rel.fixed) }}
  {{ change_category('Deprecated', '', rel.deprecated) }}
  {{ change_category('Removed', '', rel.removed) }}
  {{ change_category('Security', '', rel.security) }}
  {{ change_category('Breaking Changes', '', rel.breaking, is_breaking=true) }}

  {% if rel.href %}
  <a href="{{ rel.href }}" class="changelog-read-more">View full release notes →</a>
  {% end %}
</div>
{% end %}

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

{% block content %}
{# Load changelog data #}
{% let changelog_data = site?.data?.changelog ?? none %}

{# Ensure page is set for section pages - using unless for cleaner negative check #}
{% unless page %}
{% if section %}{% let page = section %}{% end %}
{% end %}

{# Template-scoped variables #}
{% let section_title = section?.title ?? page?.title ?? 'Changelog' %}
{% let section_desc = section?.metadata?.description ?? params?.description ?? '' %}
{% let blob_background = params?.blob_background ?? false %}
{% let cta_buttons = params?.cta_buttons ?? [] %}

{# Hero Section #}
{% let hero_classes = ['hero', 'hero--large'] %}
{% if blob_background %}{% set _ = hero_classes.append('hero--blob-background') %}{% end %}

<header class="{{ hero_classes | join(' ') }}">
  {% if blob_background %}
  <div class="hero__blobs" aria-hidden="true">
    <div class="hero__blob hero__blob--1"></div>
    <div class="hero__blob hero__blob--2"></div>
    <div class="hero__blob hero__blob--3"></div>
    <div class="hero__blob hero__blob--4"></div>
  </div>
  {% end %}
  <div class="hero__container">
    <div class="hero__content">
      <h1 class="hero__title">
        <span class="fluid-text">{{ section_title }}</span>
      </h1>
      {% if section_desc %}
      <p class="hero__subtitle">{{ section_desc }}</p>
      {% end %}

      {% if cta_buttons | length > 0 %}
      <div class="hero__actions">
        {% for button in cta_buttons %}
        {% let btn_url = button?.href ?? button?.url ?? '#' %}
        {% let btn_text = button?.text ?? 'Button' %}
        {% let btn_style = button?.style ?? 'primary' %}
        <a href="{{ btn_url | absolute_url }}"
          class="hero__button hero__button--{{ btn_style }}{{ ' gradient-border' if btn_style != 'primary' else '' }}">
          {{ btn_text }}
        </a>
        {% end %}
      </div>
      {% end %}
    </div>
  </div>
</header>

<div class="changelog-container">
  {# Content (if any) #}
  {% if content and content.strip() %}
  <section class="changelog-content prose">
    {{ content | safe }}
  </section>
  {% end %}

  {# Check for structured data to show filters - using ReleaseView #}
  {% let has_structured_data = false %}
  {% if changelog_data and changelog_data?.releases %}
  {% for rel in changelog_data.releases | releases %}
  {% if rel.has_structured_changes %}
  {% let has_structured_data = true %}
  {% break %}
  {% end %}
  {% end %}
  {% elif pages %}
  {% for rel in pages | releases %}
  {% if rel.has_structured_changes %}
  {% let has_structured_data = true %}
  {% break %}
  {% end %}
  {% end %}
  {% end %}

  {# Filter UI (only if structured data exists) #}
  {% if has_structured_data %}
  <div class="changelog-filters">
    <button class="changelog-filter-btn active" data-filter="all" aria-pressed="true">All Changes</button>
    <button class="changelog-filter-btn" data-filter="added" aria-pressed="false">Added</button>
    <button class="changelog-filter-btn" data-filter="changed" aria-pressed="false">Changed</button>
    <button class="changelog-filter-btn" data-filter="fixed" aria-pressed="false">Fixed</button>
    <button class="changelog-filter-btn" data-filter="breaking" aria-pressed="false">Breaking</button>
    <button class="changelog-filter-btn" data-filter="security" aria-pressed="false">Security</button>
  </div>
  {% end %}

  {# Data-driven mode: Use changelog.yaml with ReleaseView #}
  {# releases filter auto-sorts data (newest first) since YAML has no pre-sorting #}
  {% if changelog_data and changelog_data?.releases %}
  <section class="changelog-timeline">
    <div class="timeline">
      {% let all_releases = changelog_data.releases | releases %}
      {% for rel in all_releases %}
      {{ release_item(rel) }}
      {% end %}
    </div>
  </section>

  {# Page-driven mode: releases filter preserves ChangelogStrategy order #}
  {% elif pages | length > 0 %}
  <section class="changelog-timeline">
    <div class="timeline">
      {% let section_href = section?.href ?? '' %}
      {% let all_releases = pages | releases %}
      {% for rel in all_releases %}
      {% if rel.href != section_href %}
      {{ release_item(rel) }}
      {% end %}
      {% end %}
    </div>
  </section>

  {% else %}
  {# Empty State #}
  <div class="changelog-empty">
    <p>No releases yet. Check back soon!</p>
  </div>
  {% end %}
</div>
{% end %}