{% extends "base.html" %}

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

Displays all authors with their profiles and post counts.

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

URL Pattern: /authors/

Context variables:
- page: Current list page (_index.md)
- site.data.authors: Author registry (from data/authors.yaml)
- site.indexes.author: Author index for post counts
================================================================================
#}

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

{# =============================================================================
AUTHOR CARD COMPONENT
============================================================================= #}
{% def author_card(author) %}
{% let author_name = author?.name ?? 'Unknown Author' %}
{% let author_href = author?.href ?? '#' %}
{% let author_avatar = author?.avatar ?? '' %}
{% let author_company = author?.company ?? '' %}
{% let author_location = author?.location ?? '' %}
{% let author_bio = author?.bio ?? '' %}
{% let author_github = author?.github ?? '' %}
{% let post_count = author?.post_count ?? 0 %}

<article class="author-card">
  <a href="{{ author_href }}" class="author-card-link">
    {% if author_avatar %}
    <img src="{{ author_avatar }}" alt="{{ author_name }}" class="author-card-avatar">
    {% else %}
    <div class="author-card-avatar-placeholder">
      {{ author_name[0] | upper }}
    </div>
    {% end %}

    <div class="author-card-content">
      <h2 class="author-card-name">{{ author_name }}</h2>

      {% if author_company or author_location %}
      <p class="author-card-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-card-bio">{{ author_bio | truncate(120) }}</p>
      {% end %}

      <div class="author-card-stats">
        <span class="stat">📝 {{ post_count }} post{{ 's' if post_count != 1 else '' }}</span>
        {% if author_github %}
        <span class="stat">💻 {{ author_github }}</span>
        {% end %}
      </div>
    </div>
  </a>
</article>
{% end %}

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

{% block content %}
{# Template-scoped variables #}
{% let page_title = page?.title ?? 'Authors' %}
{% let page_desc = page?.description ?? '' %}
{% let authors_data = site?.data?.authors ?? {} %}
{% let author_index = site?.indexes?.author ?? {} %}
{% let page_children = page?.children ?? [] %}

{{ breadcrumbs(page) }}

<div class="authors-page">
  <header class="page-header">
    <h1>{{ page_title }}</h1>
    {% if page_desc %}
    <p class="page-description">{{ page_desc }}</p>
    {% end %}
  </header>

  {# Main content from markdown #}
  {% if content %}
  <div class="prose" style="margin-bottom: 2rem;">
    {{ content | safe }}
  </div>
  {% end %}

  {# Build author list from data registry and/or child pages #}
  {% let authors_list = [] %}

  {# Add authors from data/authors.yaml #}
  {% for author_key, author_data in authors_data | items %}
  {% let author_posts = author_index.get(author_key) ?? [] %}
  {% let post_count = author_posts | length %}
  {% let _name = author_data?.name ?? author_key %}
  {% set _ = authors_list.append({
  'key': author_key,
  'name': _name,
  'bio': author_data?.bio ?? '',
  'avatar': author_data?.avatar ?? '',
  'company': author_data?.company ?? '',
  'location': author_data?.location ?? '',
  'github': author_data?.github ?? '',
  'post_count': post_count,
  'href': '/authors/' ~ author_key ~ '/'
  }) %}
  {% end %}

  {# Add authors from child pages (if not already in registry) #}
  {% for child in page_children %}
  {% let child_title = child?.title ?? 'unknown' %}
  {% let author_key = child?.params?.author_name ?? child_title %}
  {% let existing = authors_list |> selectattr('key', 'eq', author_key) |> list %}
  {% if existing | length == 0 %}
  {% let author_posts = author_index.get(author_key) ?? [] %}
  {% let post_count = author_posts | length %}
  {% let child_params = child?.params ?? {} %}
  {% let child_social = child_params?.social ?? {} %}
  {% set _ = authors_list.append({
  'key': author_key,
  'name': child_title,
  'bio': child_params?.bio ?? '',
  'avatar': child_params?.avatar ?? '',
  'company': child_params?.company ?? '',
  'location': child_params?.location ?? '',
  'github': child_social?.github ?? '',
  'post_count': post_count,
  'href': child?.href ?? '#'
  }) %}
  {% end %}
  {% end %}

  {% if authors_list | length > 0 %}
  <div class="authors-grid">
    {% for author in authors_list | sort(attribute='name') %}
    {{ author_card(author) }}
    {% end %}
  </div>
  {% else %}
  <div class="empty-state">
    <p>No authors found.</p>
    <p>Add authors to <code>data/authors.yaml</code> or create pages in <code>content/authors/</code>.</p>
  </div>
  {% end %}
</div>

<style>
  .authors-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }

  .authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .author-card {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .author-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .author-card-link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
  }

  .author-card-avatar,
  .author-card-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .author-card-avatar {
    object-fit: cover;
  }

  .author-card-avatar-placeholder {
    background: var(--accent-color, #6366f1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
  }

  .author-card-content {
    flex: 1;
    min-width: 0;
  }

  .author-card-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--text-1, #111);
  }

  .author-card-meta {
    font-size: 0.875rem;
    color: var(--text-2, #6b7280);
    margin: 0 0 0.5rem;
  }

  .author-card-bio {
    font-size: 0.875rem;
    color: var(--text-2, #6b7280);
    margin: 0 0 0.75rem;
    line-height: 1.5;
  }

  .author-card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-3, #9ca3af);
  }

  .author-card-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-2, #6b7280);
  }

  .empty-state code {
    background: var(--surface-2, #f3f4f6);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.875rem;
  }
</style>
{% end %}