{% extends "base.html" %}

{#
================================================================================
Author Single Page Template (Kida-Native)
================================================================================

Displays an individual author's profile with bio, stats, and all their posts.

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 card component

URL Pattern: /authors/lbliii/

Context variables:
- page: Current author page
- params.author_name: The author key to look up
- site.indexes.author: Author index
- site.data.authors: Author registry (if data/authors.yaml exists)
================================================================================
#}

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

{# =============================================================================
POST CARD COMPONENT - uses PostView for normalized access
============================================================================= #}
{% def post_card(post) %}
{% let p = post | post_view %}
{% let post_section = post?._section %}

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

    {% if p.description %}
    <p class="post-excerpt">{{ p.description }}</p>
    {% end %}

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

      {% if post_section %}
      <span class="post-section">{{ post_section.name | title }}</span>
      {% 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="post-tags">
      {{ tag_list(p.tags[:4]) }}
    </div>
    {% end %}
  </div>
</article>
{% end %}

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

{% block content %}
{# Template-scoped variables - using AuthorView for normalized access #}
{% let author = page | author_view %}
{% let section_filter = params?.section_filter ?? '' %}
{% let author_index = site?.indexes?.author ?? {} %}

{# Get author posts with O(1) lookup #}
{% let author_posts_refs = author_index[author.key] ?? [] %}
{% let author_posts = author_posts_refs | resolve_pages %}

{# Filter by section if specified #}
{% if section_filter %}
{% let author_posts = author_posts |> selectattr('_section.name', 'eq', section_filter) |> list %}
{% end %}

{# Calculate stats #}
{% let post_count = author_posts | length %}
{% let all_content = author_posts |> map(attribute='content') |> join('') %}
{% let total_words = all_content | wordcount if all_content else 0 %}
{% let all_tags = author_posts |> map(attribute='tags') |> flatten |> unique |> list %}
{% let years = author_posts |> map(attribute='date.year') |> select('defined') |> unique |> sort %}

{{ breadcrumbs(page) }}

<div class="author-page">
  <header class="author-header">
    {% if author.avatar %}
    <img src="{{ author.avatar }}" alt="{{ author.name }}" class="author-avatar-large">
    {% else %}
    <div class="author-avatar-placeholder">
      {{ author.name[0] | upper }}
    </div>
    {% end %}

    <div class="author-header-content">
      <h1 class="author-name">{{ author.name }}</h1>

      {% if author.company or author.location %}
      <p class="author-meta">
        {% if author.company %}{{ author.company }}{% end %}
        {% if author.company and author.location %} · {% end %}
        {% if author.location %}{{ author.location }}{% end %}
      </p>
      {% end %}

      {% if author.bio %}
      <p class="author-bio">{{ author.bio }}</p>
      {% end %}

      {# Social links - using AuthorView normalized properties #}
      {% if author.twitter or author.github or author.linkedin or author.website or author.email %}
      <div class="author-social">
        {% if author.twitter %}
        <a href="https://twitter.com/{{ author.twitter }}" class="social-link" aria-label="Twitter">
          🐦 Twitter
        </a>
        {% end %}

        {% if author.github %}
        <a href="https://github.com/{{ author.github }}" class="social-link" aria-label="GitHub">
          💻 GitHub
        </a>
        {% end %}

        {% if author.linkedin %}
        <a href="https://linkedin.com/in/{{ author.linkedin }}" class="social-link" aria-label="LinkedIn">
          💼 LinkedIn
        </a>
        {% end %}

        {% if author.website %}
        <a href="{{ author.website }}" class="social-link" aria-label="Website">
          🌐 Website
        </a>
        {% end %}

        {% if author.email %}
        <a href="mailto:{{ author.email }}" class="social-link" aria-label="Email">
          ✉️ Email
        </a>
        {% end %}
      </div>
      {% end %}
    </div>
  </header>

  {% if post_count > 0 %}
  {# Statistics Section #}
  <section class="author-stats">
    <h2 class="sr-only">Author Statistics</h2>
    <div class="stats-grid">
      <div class="stat-card">
        <span class="stat-value">{{ post_count }}</span>
        <span class="stat-label">Post{{ 's' if post_count != 1 else '' }}</span>
      </div>

      <div class="stat-card">
        <span class="stat-value">{{ total_words | format_number }}</span>
        <span class="stat-label">Words</span>
      </div>

      <div class="stat-card">
        <span class="stat-value">{{ all_tags | length }}</span>
        <span class="stat-label">Topic{{ 's' if all_tags | length != 1 else '' }}</span>
      </div>

      {% if years | length > 0 %}
      <div class="stat-card">
        <span class="stat-value">{{ years | first }}</span>
        <span class="stat-label">Member Since</span>
      </div>
      {% end %}
    </div>
  </section>

  {# Main content from markdown #}
  {% if content %}
  <div class="author-content prose">
    {{ content | safe }}
  </div>
  {% end %}

  {# Posts Section #}
  <section class="author-posts">
    <h2>Posts by {{ author.name }}</h2>

    {# Group toggle #}
    <div class="posts-view-toggle">
      <button class="view-btn active" data-view="all">All Posts</button>
      <button class="view-btn" data-view="by-year">By Year</button>
      {% if all_tags | length > 0 %}
      <button class="view-btn" data-view="by-tag">By Topic</button>
      {% end %}
    </div>

    {# All Posts View (default) #}
    <div class="posts-view" data-view-content="all">
      <div class="post-list">
        {% for post in author_posts | sort(attribute='date', reverse=true) %}
        {{ post_card(post) }}
        {% end %}
      </div>
    </div>

    {# By Year View #}
    <div class="posts-view" data-view-content="by-year" style="display: none;">
      {% let posts_by_year = author_posts | group_by('date.year') %}
      {% for year, year_posts in posts_by_year | items | sort(reverse=true) %}
      <div class="year-group">
        <h3>{{ year if year else 'Undated' }} ({{ year_posts | length }})</h3>
        <ul class="post-list-compact">
          {% for post in year_posts | sort(attribute='date', reverse=true) %}
          <li>
            <a href="{{ post?.href ?? '#' }}">{{ post?.title ?? 'Untitled' }}</a>
            {% if post?.date %}
            <time>{{ post.date | dateformat('%b %d') }}</time>
            {% end %}
          </li>
          {% end %}
        </ul>
      </div>
      {% end %}
    </div>

    {# By Topic View #}
    {% if all_tags | length > 0 %}
    <div class="posts-view" data-view-content="by-tag" style="display: none;">
      {% for tag in all_tags | sort %}
      {% let tag_posts = [] %}
      {% for post in author_posts %}
      {% let post_tags = post?.tags ?? [] %}
      {% if tag in post_tags %}
      {% do tag_posts.append(post) %}
      {% end %}
      {% end %}
      <div class="tag-group">
        <h3>{{ tag }} ({{ tag_posts | length }})</h3>
        <ul class="post-list-compact">
          {% for post in tag_posts | sort(attribute='date', reverse=true) %}
          <li>
            <a href="{{ post?.href ?? '#' }}">{{ post?.title ?? 'Untitled' }}</a>
            {% if post?.date %}
            <time>{{ post.date | dateformat('%b %d, %Y') }}</time>
            {% end %}
          </li>
          {% end %}
        </ul>
      </div>
      {% end %}
    </div>
    {% end %}
  </section>

  {% else %}
  {# Empty State #}
  <div class="author-empty">
    <p>No posts found by {{ author.name }}.</p>
  </div>
  {% end %}
</div>

<script>
  // Simple view toggle
  document.querySelectorAll('.view-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const view = btn.dataset.view;
      document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.querySelectorAll('[data-view-content]').forEach(v => {
        v.style.display = v.dataset.viewContent === view ? 'block' : 'none';
      });
    });
  });
</script>
{% end %}