{% extends "base.html" %}

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

Optimized home page template for blog sites.

FEATURES:
- Simplified hero section
- Prominent recent posts grid
- Auto-discovered blog section
- Clean, reading-focused layout

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 component
- {% cache %} for recent posts computation

USAGE:
Set `template: blog/home.html` in home page frontmatter
Or set `type: blog` on home page to auto-select
================================================================================
#}

{% from 'partials/components/tags.html' import tag_list %}

{# =============================================================================
   POST CARD COMPONENT
   ============================================================================= #}
{% def post_card(post) %}
{% let post_meta = post?.metadata ?? {} %}
{% let post_image = post_meta?.image ?? post_meta?.cover ?? '' %}
{% let post_title = post?.title ?? 'Untitled' %}
{% let post_href = post?.href ?? '#' %}
{% let post_date = post?.date %}
{% let post_desc = post_meta?.description ?? post?.excerpt ?? '' %}
{% let post_tags = post?.tags ?? [] %}

<article class="blog-home-post-card gradient-border fluid-combined">
  {% if post_image %}
  <div class="blog-home-post-image">
    <a href="{{ post_href }}">
      <img src="{{ post_image }}" alt="{{ post_title }}" loading="lazy">
    </a>
  </div>
  {% end %}
  <div class="blog-home-post-content">
    <h3 class="blog-home-post-title">
      <a href="{{ post_href }}">{{ post_title }}</a>
    </h3>
    {% if post_date %}
    <time datetime="{{ post_date | date_iso }}" class="blog-home-post-date">
      {{ post_date | dateformat('%B %d, %Y') }}
    </time>
    {% end %}
    {% if post_desc %}
    <p class="blog-home-post-excerpt">{{ post_desc | truncate(150) }}</p>
    {% end %}
    {% if post_tags | length > 0 %}
    <div class="blog-home-post-tags">
      {{ tag_list(post_tags[:3]) }}
    </div>
    {% end %}
    <a href="{{ post_href }}" class="blog-home-post-link">Read more →</a>
  </div>
</article>
{% end %}

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

{% block content %}
{# Template-scoped configuration #}
{% let page_title = page?.title ?? config?.title ?? 'Blog' %}
{% let page_desc = params?.description ?? '' %}
{% let show_recent = params?.show_recent_posts ?? true %}
{% let blog_section_name = params?.blog_section ?? 'posts' %}

<div class="blog-home">
  {# Hero Section #}
  <header class="blog-home-hero">
    <div class="blog-home-hero-content">
      <h1 class="blog-home-title">{{ page_title }}</h1>
      {% if page_desc %}
      <p class="blog-home-subtitle">{{ page_desc }}</p>
      {% end %}
    </div>
  </header>

  {# Main Content (if any) #}
  {% if content and content.strip() %}
  <div class="blog-home-content prose">
    {{ content | safe }}
  </div>
  {% end %}

  {# Recent Posts Section - cached for performance #}
  {% if show_recent %}
  {% cache 'blog-home-recent-' ~ (site.nav_version ?? '') %}
  {# Find blog section #}
  {% let site_sections = site?.sections ?? [] %}
  {% let blog_section_candidates = site_sections |> selectattr('name', 'eq', blog_section_name) |> list %}
  {% let blog_section = blog_section_candidates[0] if blog_section_candidates | length > 0 else none %}

  {# Get recent posts from blog section or fallback to site-wide search #}
  {% let recent = [] %}
  {% if blog_section and blog_section?.pages %}
  {% let section_pages = blog_section.pages ?? [] %}
  {% let recent = section_pages
      |> selectattr('date')
      |> sort(attribute='date', reverse=true)
      |> take(6) %}
  {% elif site?.pages %}
  {# Fallback: find blog posts by URL path or metadata type #}
  {% let blog_posts = [] %}
  {% for p in site.pages %}
  {% let p_type = p?.metadata?.type ?? '' %}
  {% let p_path = p?._path ?? '' %}
  {% if p_type == 'blog' or '/blog/' in p_path or '/posts/' in p_path %}
  {% set _ = blog_posts.append(p) %}
  {% end %}
  {% end %}
  {% let recent = blog_posts
      |> selectattr('date')
      |> sort(attribute='date', reverse=true)
      |> take(6) %}
  {% end %}

  {% if recent | length > 0 %}
  <section class="blog-home-recent">
    <div class="blog-home-recent-header">
      <h2 class="blog-home-recent-title">Recent Posts</h2>
      {% if blog_section %}
      <a href="{{ blog_section.href }}" class="blog-home-view-all">View all posts →</a>
      {% end %}
    </div>
    <div class="blog-home-posts-grid">
      {% for post in recent %}
      {{ post_card(post) }}
      {% end %}
    </div>
  </section>
  {% end %}
  {% end %}
  {% end %}
</div>
{% end %}