{% extends "base.html" %}
{% from 'partials/navigation-components.html' import breadcrumbs, section_navigation, pagination with context %}
{% from 'partials/content-components.html' import article_card %}

{#
Chronological Archive Template

Used for blog-style sections with dated posts.
Displays content in reverse chronological order with pagination.

When to use:
- Blog posts
- News articles
- Any time-ordered content

Context variables:
- section: Section object
- posts: List of pages (may be paginated)
- subsections: Child sections
- total_pages: Total pagination pages (if paginated)
- current_page: Current page number (if paginated)
#}

{% block content %}
{{ breadcrumbs(section if section is defined else page) }}

{# Section navigation for section pages - dogfooding section properties #}
{% if section %}
{{ section_navigation(section) }}
{% endif %}

<div class="archive">
    <header class="archive-header">
        <h1>{{ title | default(section.title if section else 'Archive') }}</h1>

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

        {% if total_pages %}
        <p class="archive-count">
            Showing {{ posts | length }} of {{ total_posts }} posts
            {% if current_page > 1 %}(Page {{ current_page }} of {{ total_pages }}){% endif %}
        </p>
        {% endif %}
    </header>

    {% if posts %}
    {# Show featured posts first - dogfooding where() and where_not() #}
    {% set featured_posts = posts | where('featured', true) %}
    {% if featured_posts %}
    <section class="featured-posts">
        <h2 class="section-subtitle">Featured Posts</h2>
        <div class="archive-list archive-list-featured">
            {% for post in featured_posts %}
            {{ article_card(post, show_excerpt=True, show_image=True) }}
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# Regular posts - dogfooding where_not() #}
    {% set regular_posts = posts | where_not('featured', true) %}
    {% if regular_posts %}
    <section class="regular-posts">
        {% if featured_posts %}<h2 class="section-subtitle">All Posts</h2>{% endif %}
        <div class="archive-list">
            {% for post in regular_posts %}
            {{ article_card(post, show_excerpt=True) }}
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# Pagination #}
    {% if total_pages and total_pages > 1 %}
    {{ pagination(current_page, total_pages, base_url) }}
    {% endif %}
    {% elif subsections %}
    {# Show subsections if no direct posts #}
    <section class="subsections">
        <h2 class="section-subtitle">Sections</h2>
        <div class="archive-list">
            {% for subsection in subsections %}
            <article class="archive-item">
                <h3><a href="{{ subsection.permalink }}">{{ subsection.title }}</a></h3>
                {% if subsection.metadata.get('description') %}
                <p>{{ subsection.metadata.get('description') }}</p>
                {% endif %}
                {% if subsection.pages %}
                <p class="meta">{{ subsection.pages | length }} page(s)</p>
                {% endif %}
            </article>
            {% endfor %}
        </div>
    </section>
    {% else %}
    <div class="archive-empty">
        <div class="empty-state">
            <p class="empty-message">No posts in this archive yet.</p>
            {% if section %}
            <div class="empty-help">
                <p><strong>To add posts:</strong></p>
                <ul>
                    <li>Create a post with a date:
                        <code>content/{{ section.path.relative_to(site.content_dir) }}/my-post.md</code>
                    </li>
                    <li>Add frontmatter with <code>date: 2025-01-01</code></li>
                </ul>
                <p class="empty-hint">💡 Posts in this section will be displayed in reverse chronological order.</p>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}