{% extends "base.html" %}

{#
================================================================================
Blog List Template (Kida-Native)
================================================================================

Blog section index with featured posts, excerpts, and pagination.

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- Pipeline operator (|>) for filter chains
- {% def %} for reusable post card components
- {% match %} for conditional rendering

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

NOTE:
Uses post.word_count and post.reading_time computed properties
instead of filters for better performance (cached on first access).

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

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

{# =============================================================================
POST CARD COMPONENTS
============================================================================= #}

{# Featured post card (larger, more prominent) - uses PostView for normalized access #}
{% def featured_card(post) %}
{% let p = post | post_view %}

<article class="blog-featured-card gradient-border-strong fluid-bg">
    {% if p.image %}
    <div class="blog-card-image">
        <a href="{{ p.href }}">
            <img src="{{ p.image }}" alt="{{ p.title }}" loading="lazy">
        </a>
    </div>
    {% end %}

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

        {% if p.description %}
        <p class="blog-card-excerpt">{{ p.description | truncate(180) }}</p>
        {% end %}

        <div class="blog-card-meta">
            {% if p.author %}
            <span class="blog-author">
                {% if p.author_avatar %}
                <img src="{{ p.author_avatar }}" alt="{{ p.author }}" class="author-avatar">
                {% end %}
                {{ p.author }}
            </span>
            {% end %}

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

            {% if p.reading_time > 0 %}
            <span class="reading-time">{{ p.reading_time }} min read</span>
            {% end %}
        </div>

        {% if p.tags | length > 0 %}
        <div class="blog-card-tags">
            {{ tag_list(p.tags[:3]) }}
        </div>
        {% end %}
    </div>
</article>
{% end %}

{# Regular post card - uses PostView for normalized access #}
{% def post_card(post) %}
{% let p = post | post_view %}

<article class="blog-post-card gradient-border fluid-combined">
    {% if p.image %}
    <div class="blog-card-image">
        <a href="{{ p.href }}">
            <img src="{{ p.image }}" alt="{{ p.title }}" loading="lazy">
        </a>
    </div>
    {% end %}

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

        {% if p.description %}
        <p class="blog-card-excerpt">{{ p.description | truncate(200) }}</p>
        {% end %}

        <div class="blog-card-meta">
            {% if p.author %}
            <span class="blog-author">
                {% if p.author_avatar %}
                <img src="{{ p.author_avatar }}" alt="{{ p.author }}" class="author-avatar">
                {% end %}
                {{ p.author }}
            </span>
            {% end %}

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

            {% if p.reading_time > 0 %}
            <span class="reading-time">{{ p.reading_time }} min read</span>
            {% end %}
        </div>

        {% if p.tags | length > 0 %}
        <div class="blog-card-tags">
            {{ tag_list(p.tags[:4]) }}
        </div>
        {% end %}

        <a href="{{ p.href }}" class="blog-read-more">Read more →</a>
    </div>
</article>
{% end %}

{# Category/subsection card #}
{% def category_card(subsection) %}
{% let sub_title = subsection?.title ?? 'Category' %}
{% let sub_href = subsection?.href ?? '#' %}
{% let sub_desc = subsection?.metadata?.description ?? '' %}
{% let sub_pages = subsection?.regular_pages ?? [] %}
{% let index_page = subsection?.index_page %}
{% let index_path = index_page?._path ?? '' %}
{# Count non-index pages #}
{% let content_pages = sub_pages |> rejectattr('relative_url', 'eq', index_path) |> list %}
{% let page_count = content_pages | length %}

<article class="blog-post-card">
    <div class="blog-card-content">
        <h3 class="blog-card-title">
            <a href="{{ sub_href }}">{{ sub_title }}</a>
        </h3>
        {% if sub_desc %}
        <p class="blog-card-excerpt">{{ sub_desc }}</p>
        {% end %}
        {% if page_count > 0 %}
        <p class="blog-card-meta">{{ page_count }} post{{ 's' if page_count != 1 else '' }}</p>
        {% end %}
    </div>
</article>
{% end %}

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

{# Defensive defaults for pagination #}
{% let total_pages = total_pages ?? 1 %}
{% let current_page = current_page ?? 1 %}
{% let total_posts = total_posts ?? (posts | length if posts else 0) %}
{% let base_url = base_url ?? section?.href ?? '/blog/' %}

{% block content %}
<div class="container">
    {# Action Bar: Breadcrumbs + Share #}
    {% include 'partials/action-bar.html' %}

    <div class="blog-container">
        {# Header #}
        {% let section_title = section?.title ?? title ?? 'Blog' %}
        {% let section_desc = section?.metadata?.description ?? description ?? '' %}

        <header class="page-header page-header--centered">
            <h1>✍️ {{ section_title }}</h1>

            {% if section_desc %}
            <p class="blog-description">{{ section_desc }}</p>
            {% end %}

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

        {% if posts %}
        {# Featured Posts Section (first page only) #}
        {% if current_page == 1 %}
        {% let featured_posts = posts |> where('featured', true) |> take(3) %}
        {% else %}
        {% let featured_posts = [] %}
        {% end %}
        {% if featured_posts | length > 0 %}
        <section class="blog-featured">
            <h2 class="blog-section-title">Featured Posts</h2>
            <div class="blog-featured-grid stagger-fade-in">
                {% for post in featured_posts %}
                {{ featured_card(post) }}
                {% export last_featured_post = post %}
                {% end %}
            </div>
        </section>
        {% end %}

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

            <div class="blog-post-list">
                {% for post in regular_posts %}
                {{ post_card(post) }}
                {% export last_regular_post = post %}
                {% end %}
            </div>
        </section>
        {% end %}

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

        {% elif subsections | length > 0 %}
        {# 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 %}
                {{ category_card(subsection) }}
                {% end %}
            </div>
        </section>

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