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

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

{# For section pages (like changelog list), ensure 'page' refers to the section #}
{% if not page is defined and section is defined %}
{% set page = section %}
{% endif %}

{# Hero Section - matches home page style #}
{% set hero_classes = ['hero', 'hero--large'] %}
{% if page and page.metadata.get('blob_background', false) %}
{% set _ = hero_classes.append('hero--blob-background') %}
{% endif %}
<header class="{{ hero_classes | join(' ') }}">
    {% if page and page.metadata.get('blob_background', false) %}
    {# Organic blob background animation #}
    <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>
    {% endif %}
    <div class="hero__container">
        <div class="hero__content">
            <h1 class="hero__title">
                <span class="fluid-text">{{ section.title if section else page.title if page else 'Changelog' }}</span>
            </h1>
            {% set hero_description = section.metadata.get('description', '') if section else (page.metadata.get('description', '') if page else '') %}
            {% if hero_description %}
            <p class="hero__subtitle">{{ hero_description }}</p>
            {% endif %}

            {% if page and page.metadata.get('cta_buttons') %}
            <div class="hero__actions">
                {% for button in page.metadata.get('cta_buttons') %}
                <a href="{{ button.get('href') or button.get('url') | absolute_url }}"
                    class="hero__button hero__button--{{ button.get('style', 'primary') }} {% if button.get('style') != 'primary' %}gradient-border{% endif %}">
                    {{ button.get('text') }}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</header>

<div class="changelog-container">

    {% 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.href }}">{{ 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.href }}" 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 %}