{% extends "base.html" %}

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

Displays all posts with a specific tag.

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

USAGE:
Auto-generated for each tag in the site
================================================================================
#}

{% from 'partials/components/article.html' import article_card %}
{% from 'partials/navigation-components.html' import pagination %}

{% block content %}
{# Template-scoped variables #}
{% let current_tag = tag ?? '' %}
{% let tag_posts = posts ?? [] %}
{% let tag_posts_count = tag_posts | length %}
{% let total_posts = total_posts ?? tag_posts_count %}
{% let total_pages = total_pages ?? 1 %}
{% let current_page = current_page ?? 1 %}
{% let base_url = base_url ?? tag_url(current_tag) %}

{# Two-column layout similar to docs #}
<div class="docs-layout">
  {# Left Sidebar: Tag Navigation #}
  <aside class="docs-sidebar" id="tag-sidebar" role="navigation" aria-label="Tag navigation">
    {% include 'partials/tag-nav.html' %}
  </aside>

  {# Main Content #}
  <div class="docs-main">
    <article class="prose">
      {# Page Hero - Magazine style #}
      <header class="page-hero page-hero--magazine page-hero--tag">
        <nav class="page-hero__eyebrow" aria-label="Breadcrumb">
          <a href="{{ '/' | absolute_url }}" class="page-hero__breadcrumb-link">Home</a>
          <span class="page-hero__breadcrumb-sep">/</span>
          <a href="{{ '/tags/' | absolute_url }}" class="page-hero__breadcrumb-link">Tags</a>
          <span class="page-hero__breadcrumb-sep">/</span>
          <span class="page-hero__breadcrumb-current">{{ current_tag }}</span>
        </nav>
        <h1 class="page-hero__title page-hero__title--tag">
          <span class="tag-icon">#</span>
          <span>{{ current_tag }}</span>
        </h1>
        <p class="page-hero__description">
          {{ total_posts | pluralize('post', 'posts') }} tagged with "{{ current_tag }}"
        </p>
        <div class="page-hero__actions page-hero__actions--tag">
          <a href="{{ '/graph/' | absolute_url }}?tag={{ current_tag | url_encode }}" class="button button-outline inline-flex items-center gap-2">
            Explore Knowledge Graph
          </a>
          <a href="{{ '/tags/' | absolute_url }}" class="button button-outline">View all tags</a>
        </div>
      </header>

      {% if tag_posts | length > 0 %}
      <div class="archive-list archive-list--tag">
        {% for post in tag_posts %}
        {# Skip autodoc pages using efficient function check instead of string manipulation #}
        {% let is_autodoc = is_autodoc_page(post) if is_autodoc_page is defined else false %}
        {% unless is_autodoc %}
        {{ article_card(post, show_excerpt=true) }}
        {% end %}
        {% end %}
      </div>

      {# Pagination #}
      {% if total_pages > 1 %}
      {{ pagination(current_page, total_pages, base_url) }}
      {% end %}
      {% else %}
      <p>No posts found with this tag.</p>
      {% end %}

      <div class="tag-nav">
        <a href="{{ '/tags/' | absolute_url }}" class="button button-outline">← View all tags</a>
      </div>
    </article>
  </div>

  {# Right Sidebar: Empty (hidden by CSS) #}
  <aside class="docs-toc"></aside>
</div>
{% end %}