{% extends "base.html" %}

{#
================================================================================
Blog Post Single Page Template (Kida-Native)
================================================================================

Individual blog post page optimized for reading.

FEATURES:
- Featured image support
- Author information and bio
- Reading time estimation
- Social sharing buttons
- Related posts section
- Comments integration point
- Table of contents sidebar

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

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

USAGE:
Set `type: blog` in frontmatter or use cascade from section
================================================================================
#}

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

{# =============================================================================
RELATED POST CARD COMPONENT - uses PostView for normalized access
============================================================================= #}
{% def related_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(120) }}</p>
        {% end %}
        {% if p.date %}
        <time datetime="{{ p.date | date_iso }}">{{ p.date | time_ago }}</time>
        {% end %}
    </div>
</article>
{% end %}

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

{% block content %}
{# Template-scoped variables with null-safe access #}
{% let page_title = page?.title ?? 'Blog Post' %}
{% let page_date = page?.date %}
{% let page_word_count = page?.word_count ?? 0 %}
{% let page_read_time = page?.reading_time ?? 0 %}
{% let page_tags = page?.tags ?? [] %}
{% let page_href = page?.href ?? '' %}
{% let theme_features = theme?.features ?? [] %}

{# Params with null-safe access #}
{% let post_image = params?.image ?? params?.cover ?? '' %}
{% let post_desc = params?.description ?? '' %}
{% let post_author = params?.author ?? '' %}
{% let post_author_avatar = params?.author_avatar ?? '' %}
{% let post_author_title = params?.author_title ?? '' %}
{% let post_author_bio = params?.author_bio ?? '' %}
{% let post_author_links = params?.author_links ?? [] %}
{% let post_updated = params?.updated %}
{% let post_views = params?.views %}
{% let css_class = params?.css_class ?? '' %}
{% let show_newsletter = params?.show_newsletter ?? false %}
{% let show_comments = params?.comments ?? true %}

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

    <div class="blog-post-layout{{ ' blog-with-toc' if toc else '' }}">
        <article class="blog-post prose {{ css_class }}">
            <header class="blog-post-header">
                {# Featured Image #}
                {% if post_image %}
                <div class="blog-post-image">
                    <img src="{{ post_image }}" alt="{{ page_title }}">
                </div>
                {% end %}

                <h1>{{ page_title }}</h1>

                {% if post_desc %}
                <p class="lead">{{ post_desc }}</p>
                {% end %}

                {# Post Metadata #}
                <div class="blog-post-meta">
                    {# Author Info #}
                    {% with post_author as author %}
                    {% if 'content.author' in theme_features %}
                    <div class="blog-post-author">
                        {% if post_author_avatar %}
                        <img src="{{ post_author_avatar }}" alt="{{ author }}" class="author-avatar">
                        {% end %}
                        <div class="author-info">
                            <strong>{{ author }}</strong>
                            {% if post_author_title %}
                            <span class="author-title">{{ post_author_title }}</span>
                            {% end %}
                        </div>
                    </div>
                    {% end %}
                    {% end %}

                    <div class="blog-post-details">
                        {# Publication Date #}
                        {% if page_date %}
                        <time datetime="{{ page_date | date_iso }}"
                            title="{{ page_date | dateformat('%B %d, %Y at %I:%M %p') }}">
                            {{ page_date | dateformat('%B %d, %Y') }}
                        </time>
                        {% end %}

                        {# Reading Time #}
                        {% if page_word_count and 'content.reading_time' in theme_features %}
                        <span class="reading-time">
                            {{ icon('clock', size=14) }}
                            {{ page_read_time }} min read
                        </span>
                        {% end %}

                        {# View Count #}
                        {% if post_views %}
                        <span class="view-count">
                            {{ icon('eye', size=14) }}
                            {{ post_views }} views
                        </span>
                        {% end %}
                    </div>
                </div>

                {# Tags #}
                {% if page_tags | length > 0 %}
                <div class="blog-post-tags">
                    {{ tag_list(page_tags) }}
                </div>
                {% end %}
            </header>

            {# Main Post Content #}
            <div class="blog-post-content">
                {{ content | safe }}
            </div>

            {# Post Footer #}
            <footer class="blog-post-footer">
                {# Updated Date #}
                {% if post_updated and post_updated != page_date %}
                <p class="blog-updated">
                    <em>Last updated: {{ post_updated | dateformat('%B %d, %Y') }}</em>
                </p>
                {% end %}

                {# Author Bio #}
                {% with post_author, post_author_bio as author, bio %}
                {% if 'content.author' in theme_features %}
                <div class="author-bio">
                    <div class="author-bio-header">
                        {% if post_author_avatar %}
                        <img src="{{ post_author_avatar }}" alt="{{ author }}" class="author-avatar-large">
                        {% end %}
                        <div>
                            <h3>About {{ author }}</h3>
                            {% if post_author_title %}
                            <p class="author-title">{{ post_author_title }}</p>
                            {% end %}
                        </div>
                    </div>
                    <p class="author-bio-text">{{ bio }}</p>
                    {% if post_author_links | length > 0 %}
                    <div class="author-links">
                        {% for link in post_author_links %}
                        {% let link_url = link?.href ?? link?.url ?? '#' %}
                        {% let link_text = link?.text ?? 'Link' %}
                        <a href="{{ link_url }}" target="_blank" rel="noopener noreferrer">{{ link_text }}</a>
                        {% end %}
                    </div>
                    {% end %}
                </div>
                {% end %}
                {% end %}

                {# Social Sharing #}
                <div class="blog-social-share">
                    <h4>{{ t('blog.share_post', default='Share this post') }}</h4>
                    <div class="share-buttons">
                        {% let platforms = [
                        {'id': 'twitter', 'label': 'Twitter', 'icon': 'twitter-logo'},
                        {'id': 'linkedin', 'label': 'LinkedIn', 'icon': 'linkedin-logo'},
                        {'id': 'facebook', 'label': 'Facebook', 'icon': 'facebook-logo'},
                        {'id': 'reddit', 'label': 'Reddit', 'icon': 'reddit-logo'},
                        {'id': 'email', 'label': 'Email', 'icon': 'envelope-simple'}
                        ] %}
                        {% for platform in platforms %}
                        <a href="{{ share_url(platform.id, page) }}" target="_blank" rel="noopener noreferrer"
                            class="share-button share-{{ platform.id }}" aria-label="Share on {{ platform.label }}">
                            {{ icon(platform.icon, size=20) }} {{ platform.label }}
                        </a>
                        {% end %}
                        <button class="share-button share-copy"
                            onclick="navigator.clipboard.writeText('{{ page_href }}'); this.innerHTML = '✓ Copied!'"
                            aria-label="Copy link">
                            {{ icon('link', size=20) }} Copy Link
                        </button>
                    </div>
                </div>
            </footer>
        </article>

        {# Right Sidebar: TOC #}
        {% if toc %}
        <aside class="blog-sidebar">
            <nav class="toc" aria-label="Table of contents">
                <h2 class="toc-title">In This Post</h2>
                <div class="toc-content">
                    {{ toc | safe }}
                </div>
            </nav>

            {# Newsletter CTA (Optional) #}
            {% if show_newsletter %}
            <div class="newsletter-cta">
                <h3>Stay Updated</h3>
                <p>Get notified when we publish new content.</p>
                <form class="newsletter-form" data-newsletter-target>
                    <input type="email" id="newsletter-email" name="email" placeholder="Your email" required>
                    <button type="submit">Subscribe</button>
                </form>
            </div>
            {% end %}
        </aside>
        {% end %}
    </div>
</div>

{# Page Navigation (Prev/Next Posts) #}
{{ page_navigation(page) }}

{# Related Posts #}
{% let related_posts = page?.related_posts |> take(3) ?? [] %}
{% if related_posts | length > 0 %}
<aside class="related-posts">
    <div class="container">
        <h2>{{ t('blog.related_posts', default='Related Posts') }}</h2>
        <div class="blog-featured-grid">
            {% for post in related_posts %}
            {{ related_card(post) }}
            {% end %}
        </div>
    </div>
</aside>
{% end %}

{# Comments Section (Integration Point) #}
{% if show_comments %}
<div class="comments-section">
    <div class="container">
        <h2>{{ t('blog.comments', default='Comments') }}</h2>
        <div id="comments" data-comments-target></div>
        <p class="comments-placeholder">
            <em>{{ t('blog.comments_placeholder', default='Comments are loaded dynamically. Configure your comments
                system in the theme.') }}</em>
        </p>
    </div>
</div>
{% end %}
{% end %}