{% extends "base.html" %}

{#
Blog List Template

Used for blog section indexes. Displays blog posts in reverse chronological
order with featured posts, excerpts, and pagination.

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

Context variables:
- section: Section object with blog posts
- posts: List of blog post pages (may be paginated)
- subsections: Blog categories/archives
- total_pages: Total pagination pages
- current_page: Current page number
#}

{% from 'partials/navigation-components.html' import breadcrumbs, pagination %}
{% from 'partials/content-components.html' import tag_list %}

{# Defensive defaults for pagination variables (safe fallback if not provided) #}
{% set total_pages = total_pages | default(1) %}
{% set current_page = current_page | default(1) %}
{% set total_posts = total_posts | default(posts | length if posts else 0) %}
{% set base_url = base_url | default(section.url if section else '/blog/') %}

{% block content %}
{# Action Bar: Breadcrumbs + Share #}
{% include 'partials/action-bar.html' with context %}

<div class="blog-container">
    <header class="blog-header">
        <h1>✍️ {{ section.title if section else title | default('Blog') }}</h1>

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

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

    {% if posts %}
    {# Featured Posts Section #}
    {% set featured_posts = posts | where('featured', true) | limit(3) %}
    {% if featured_posts and current_page == 1 %}
    <section class="blog-featured">
        <h2 class="blog-section-title">Featured Posts</h2>
        <div class="blog-featured-grid">
            {% for post in featured_posts %}
            <article class="blog-featured-card">
                {% if post.metadata.get('image') or post.metadata.get('cover') %}
                <div class="blog-card-image">
                    <a href="{{ post.permalink }}">
                        <img src="{{ post.metadata.get('image') | default(post.metadata.get('cover')) }}"
                            alt="{{ post.title }}">
                    </a>
                </div>
                {% endif %}

                <div class="blog-card-content">
                    <h3 class="blog-card-title">
                    <a href="{{ post.permalink }}">{{ post.title }}</a>
                    </h3>

                    {% if post.metadata.get('description') or post.excerpt %}
                    <p class="blog-card-excerpt">
                        {{ post.metadata.get('description') | default(post.excerpt) | truncate(180) }}
                    </p>
                    {% endif %}

                    <div class="blog-card-meta">
                        {% if post.metadata.get('author') %}
                        <span class="blog-author">
                            {% if post.metadata.get('author_avatar') %}
                            <img src="{{ post.metadata.get('author_avatar') }}" alt="{{ post.metadata.get('author') }}"
                                class="author-avatar">
                            {% endif %}
                            {{ post.metadata.get('author') }}
                        </span>
                        {% endif %}

                        {% if post.date %}
                        <time datetime="{{ post.date | date_iso }}">
                            {{ post.date | dateformat('%B %d, %Y') }}
                        </time>
                        {% endif %}

                        {% if post.content %}
                        <span class="reading-time">
                            {{ (post.content | wordcount / 200) | round }} min read
                        </span>
                        {% endif %}
                    </div>

                    {% if post.tags %}
                    <div class="blog-card-tags">
                        {{ tag_list(post.tags | limit(3)) }}
                    </div>
                    {% endif %}
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# All Posts Section #}
    {% set regular_posts = posts | where_not('featured', true) if current_page == 1 else posts %}
    {% if regular_posts %}
    <section class="blog-posts">
        {% if featured_posts and current_page == 1 %}
        <h2 class="blog-section-title">Recent Posts</h2>
        {% endif %}

        <div class="blog-post-list">
            {% for post in regular_posts %}
            <article class="blog-post-card">
                {% if post.metadata.get('image') or post.metadata.get('cover') %}
                <div class="blog-card-image">
                <a href="{{ post.permalink }}">
                        <img src="{{ post.metadata.get('image') | default(post.metadata.get('cover')) }}"
                            alt="{{ post.title }}">
                    </a>
                </div>
                {% endif %}

                <div class="blog-card-content">
                    <h3 class="blog-card-title">
                    <a href="{{ post.permalink }}">{{ post.title }}</a>
                    </h3>

                    {% if post.metadata.get('description') or post.excerpt %}
                    <p class="blog-card-excerpt">
                        {{ post.metadata.get('description') | default(post.excerpt) | truncate(200) }}
                    </p>
                    {% endif %}

                    <div class="blog-card-meta">
                        {% if post.metadata.get('author') %}
                        <span class="blog-author">
                            {% if post.metadata.get('author_avatar') %}
                            <img src="{{ post.metadata.get('author_avatar') }}" alt="{{ post.metadata.get('author') }}"
                                class="author-avatar">
                            {% endif %}
                            {{ post.metadata.get('author') }}
                        </span>
                        {% endif %}

                        {% if post.date %}
                        <time datetime="{{ post.date | date_iso }}">
                            {{ post.date | time_ago }}
                        </time>
                        {% endif %}

                        {% if post.content %}
                        <span class="reading-time">
                            {{ (post.content | wordcount / 200) | round }} min read
                        </span>
                        {% endif %}
                    </div>

                    {% if post.tags %}
                    <div class="blog-card-tags">
                        {{ tag_list(post.tags | limit(4)) }}
                    </div>
                    {% endif %}

                    <a href="{{ post.permalink }}" class="blog-read-more">
                        Read more →
                    </a>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# Pagination #}
    {% if total_pages and total_pages > 1 %}
    {{ pagination(current_page, total_pages, base_url) }}
    {% endif %}

    {% elif subsections %}
    {# Show blog categories/archives if no posts #}
    <section class="blog-categories">
        <h2 class="blog-section-title">Categories</h2>
        <div class="blog-post-list">
            {% for subsection in subsections %}
            <article class="blog-post-card">
                <div class="blog-card-content">
                    <h3 class="blog-card-title">
                    <a href="{{ subsection.permalink }}">{{ subsection.title }}</a>
                    </h3>
                    {% if subsection.metadata.get('description', '') %}
                    <p class="blog-card-excerpt">{{ subsection.metadata.get('description', '') }}</p>
                    {% endif %}
                    {% if subsection.regular_pages %}
                    {# Count only non-index pages #}
                    {% set index_url = subsection.index_page.url if subsection.index_page else '' %}
                    {% set content_pages = subsection.regular_pages | rejectattr('url', 'equalto', index_url) | list %}
                    {% if content_pages %}
                    <p class="blog-card-meta">{{ content_pages | length }} post{{ 's' if content_pages | length != 1 }}
                    </p>
                    {% endif %}
                    {% endif %}
                </div>
            </article>
            {% endfor %}
        </div>
    </section>

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

</div>
{% endblock %}