{% extends "base.html" %}

{#
Changelog/Release Notes Template

Used for changelog and release notes sections. Displays releases in a timeline format
with version numbers, dates, and categorized changes.

Usage: Set `type: changelog` in section _index.md

Context variables:
- section: Section object with release notes
- pages: List of release pages (individual releases)
- changelog: Changelog data from site.data.changelog (optional)

Supports two modes:
1. Data-driven: All releases in data/changelog.yaml
2. Page-driven: Each release as a separate markdown file
#}

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

{% block content %}
{# Load changelog data from site.data (preferred) or use pages (fallback) #}
{% set changelog_data = site.data.get('changelog') if site.data is defined and site.data else none %}

<div class="changelog-container">
    {# Action Bar: Breadcrumbs + Share #}
    {% include 'partials/action-bar.html' %}
    {# For section pages (like changelog list), we might need to ensure 'page' refers to the section #}
    {# The action-bar partial expects 'page' variable. In list templates, 'section' is the main object #}
    {# We'll let the partial handle it if page is defined, or we might need to alias section to page #}
    {% if not page is defined and section is defined %}
    {% set page = section %}
    {% endif %}

    <header class="page-header page-header--centered">
        <h1>📋 {{ section.title if section else title | default('Changelog') }}</h1>

        {% if section and section.metadata.get('description', '') %}
        <p class="changelog-description">{{ section.metadata.get('description', '') }}</p>
        {% elif description %}
        <p class="changelog-description">{{ description }}</p>
        {% endif %}
    </header>

    {% if content and content.strip() %}
    <section class="changelog-content prose">
        {{ content | safe }}
    </section>
    {% endif %}

    {# Check if any releases have structured metadata for filtering #}
    {% set has_structured_data = false %}
    {% if changelog_data and changelog_data.get('releases') %}
        {% for release in changelog_data.get('releases') %}
            {% if release.get('added') or release.get('changed') or release.get('fixed') or release.get('breaking') or release.get('security') %}
                {% set has_structured_data = true %}
            {% endif %}
        {% endfor %}
    {% elif pages %}
        {% for release in pages %}
            {% if release.metadata.get('added') or release.metadata.get('changed') or release.metadata.get('fixed') or release.metadata.get('breaking') or release.metadata.get('security') %}
                {% set has_structured_data = true %}
            {% endif %}
        {% endfor %}
    {% endif %}

    {# Filter UI - Only show 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>
    {% endif %}

    {# Data-driven mode: Use changelog.yaml #}
    {% if changelog_data and changelog_data.get('releases') %}
    <section class="changelog-timeline">
        <div class="timeline">
            {% for release in changelog_data.get('releases') %}
            {# Build list of change types for filtering #}
            {% set change_types = [] %}
            {% if release.get('added') %} {% set _ = change_types.append('added') %} {% endif %}
            {% if release.get('changed') %} {% set _ = change_types.append('changed') %} {% endif %}
            {% if release.get('fixed') %} {% set _ = change_types.append('fixed') %} {% endif %}
            {% if release.get('breaking') %} {% set _ = change_types.append('breaking') %} {% endif %}
            {% if release.get('security') %} {% set _ = change_types.append('security') %} {% endif %}
            <div class="timeline-item" data-change-types="{{ change_types | join(' ') }}">
                <div class="timeline-header">
                    <div class="timeline-title-group">
                        <h2 class="timeline-title">
                            {% if release.get('url') %}
                            <a href="{{ release.get('url') }}">{{ release.get('version') }}</a>
                            {% else %}
                            {{ release.get('version') }}
                            {% endif %}
                        </h2>
                        {% if release.get('name') %}
                        <p class="timeline-subtitle">{{ release.get('name') }}</p>
                        {% endif %}
                    </div>
                    <div class="timeline-meta">
                        {% if release.get('date') %}
                        <span class="timeline-date">{{ release.get('date') }}</span>
                        {% endif %}
                        {% if release.get('status') %}
                        <span class="release-status status-{{ release.get('status') | lower }}">
                            {{ release.get('status') }}
                        </span>
                        {% endif %}
                    </div>
                </div>

                {% if release.get('summary') %}
                <p class="timeline-description">{{ release.get('summary') }}</p>
                {% endif %}

                {# Added Features #}
                {% if release.get('added') and release.get('added') is iterable and release.get('added') is not string
                %}
                <div class="changelog-category">
                    <h3 class="category-title">✨ Added</h3>
                    <ul class="changelog-list">
                        {% for item in release.get('added') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {# Changed/Improved #}
                {% if release.get('changed') and release.get('changed') is iterable and release.get('changed') is not
                string %}
                <div class="changelog-category">
                    <h3 class="category-title">🔄 Changed</h3>
                    <ul class="changelog-list">
                        {% for item in release.get('changed') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {# Fixed Bugs #}
                {% if release.get('fixed') and release.get('fixed') is iterable and release.get('fixed') is not string
                %}
                <div class="changelog-category">
                    <h3 class="category-title">🐛 Fixed</h3>
                    <ul class="changelog-list">
                        {% for item in release.get('fixed') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {# Deprecated #}
                {% if release.get('deprecated') and release.get('deprecated') is iterable and release.get('deprecated')
                is not string %}
                <div class="changelog-category">
                    <h3 class="category-title">⚠️ Deprecated</h3>
                    <ul class="changelog-list">
                        {% for item in release.get('deprecated') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {# Removed #}
                {% if release.get('removed') and release.get('removed') is iterable and release.get('removed') is not
                string %}
                <div class="changelog-category">
                    <h3 class="category-title">🗑️ Removed</h3>
                    <ul class="changelog-list">
                        {% for item in release.get('removed') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {# Security #}
                {% if release.get('security') and release.get('security') is iterable and release.get('security') is not
                string %}
                <div class="changelog-category">
                    <h3 class="category-title">🔒 Security</h3>
                    <ul class="changelog-list">
                        {% for item in release.get('security') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {# Breaking Changes #}
                {% if release.get('breaking') and release.get('breaking') is iterable and release.get('breaking') is not
                string %}
                <div class="changelog-category changelog-category--breaking">
                    <h3 class="category-title category-title--breaking">⚡ Breaking Changes</h3>
                    <ul class="changelog-list changelog-list--breaking">
                        {% for item in release.get('breaking') %}
                        <li class="changelog-item--breaking">{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </section>

    {# Page-driven mode: Use individual release pages #}
    {% elif pages %}
    <section class="changelog-timeline">
        <div class="timeline">
            {% for release in pages %}
            {# Build list of change types for filtering #}
            {# If no structured metadata, leave empty - JavaScript will show for all filters #}
            {% set change_types = [] %}
            {% if release.metadata.get('added') %} {% set _ = change_types.append('added') %} {% endif %}
            {% if release.metadata.get('changed') %} {% set _ = change_types.append('changed') %} {% endif %}
            {% if release.metadata.get('fixed') %} {% set _ = change_types.append('fixed') %} {% endif %}
            {% if release.metadata.get('breaking') %} {% set _ = change_types.append('breaking') %} {% endif %}
            {% if release.metadata.get('security') %} {% set _ = change_types.append('security') %} {% endif %}
            <div class="timeline-item" data-change-types="{{ change_types | join(' ') }}">
                <div class="timeline-header">
                    <div class="timeline-title-group">
                        <h2 class="timeline-title">
                            <a href="{{ release.url }}">{{ release.title }}</a>
                        </h2>
                        {% if release.metadata.get('name') %}
                        <p class="timeline-subtitle">{{ release.metadata.get('name') }}</p>
                        {% endif %}
                    </div>
                    <div class="timeline-meta">
                        {% if release.date %}
                        <time datetime="{{ release.date | date_iso }}">
                            {{ release.date | dateformat('%B %d, %Y') }}
                        </time>
                        {% endif %}
                        {% if release.metadata.get('status') %}
                        <span class="release-status status-{{ release.metadata.get('status') | lower }}">
                            {{ release.metadata.get('status') }}
                        </span>
                        {% endif %}
                    </div>
                </div>

                {% set release_description = release.metadata.get('description') or release.metadata.get('summary') or release.excerpt %}
                {% if release_description %}
                <p class="timeline-description">
                    {{ release_description }}
                </p>
                {% endif %}

                {# Show categories if in metadata #}
                {% if release.metadata.get('added') %}
                <div class="changelog-category">
                    <h3 class="category-title">✨ Added</h3>
                    <ul class="changelog-list">
                        {% for item in release.metadata.get('added') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {% if release.metadata.get('changed') %}
                <div class="changelog-category">
                    <h3 class="category-title">🔄 Changed</h3>
                    <ul class="changelog-list">
                        {% for item in release.metadata.get('changed') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {% if release.metadata.get('fixed') %}
                <div class="changelog-category">
                    <h3 class="category-title">🐛 Fixed</h3>
                    <ul class="changelog-list">
                        {% for item in release.metadata.get('fixed') %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                <a href="{{ release.url }}" class="changelog-read-more">
                    View full release notes →
                </a>
            </div>
            {% endfor %}
        </div>
    </section>

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


</div>
{% endblock %}