{% 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 %}
{% from 'partials/components/post-card.html' import post_card %}

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

{% block content %}
{# Template-scoped variables - using AuthorView for normalized access #}
{% let author = (page | author_view) ?? none %}
{% 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.get(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) if author?.name else '?' }}
    </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, variant='compact') }}
        {% end %}
      </div>
    </div>

    {# By Year View #}
    <div class="posts-view hidden" data-view-content="by-year">
      {% 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?._path ?? '#' }}">{{ 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 hidden" data-view-content="by-tag">
      {% for tag in all_tags | sort %}
      {% let tag_posts = [] %}
      {% for post in author_posts %}
      {% let post_tags = post?.tags ?? [] %}
      {% if tag in post_tags %}
      {% set _ = 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?._path ?? '#' }}">{{ 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.classList.toggle('hidden', v.dataset.viewContent !== view);
      });
    });
  });
</script>
{% end %}