{% extends "base.html" %}

{#
================================================================================
All Tags Page Template (Kida-Native)
================================================================================

Displays all tags in a cloud/grid layout.

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

USAGE:
Auto-generated at /tags/
================================================================================
#}

{% block content %}
{# Template-scoped variables #}
{% let page_title = page?.title ?? 'All Tags' %}
{% let all_tags = tags ?? [] %}
{% let all_tags_count = all_tags | length %}
{% let total_tags = total_tags ?? all_tags_count %}

{# 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">
    {% let current_tag = none %}
    {% 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--tags">
        <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>
          <span class="page-hero__breadcrumb-current">Browse by topic</span>
        </nav>
        <h1 class="page-hero__title">{{ page_title }}</h1>
        <p class="page-hero__description">
          Browse all {{ total_tags }} tags
        </p>
        <div class="page-hero__actions page-hero__actions--tags">
          <a href="{{ '/graph/' | absolute_url }}" class="button button-outline inline-flex items-center gap-2">
            Explore Knowledge Graph
          </a>
        </div>
      </header>

      {% if all_tags | length > 0 %}
      <div class="tag-cards-grid">
        {% for tag in all_tags %}
        {% let tag_name = tag?.name ?? '' %}
        {% let tag_count = tag?.count ?? 0 %}
        {% let accent_index = tag_name | tag_accent_index %}
        <a href="{{ (tag?.href ?? tag_url(tag_name)) | absolute_url }}" class="tag-card gradient-border fluid-combined{{ ' tag-card--featured' if loop.index0 < 3 else '' }}"
           data-tag-accent="{{ accent_index }}">
          <span class="tag-card__icon">#</span>
          <h3 class="tag-card__title">{{ tag_name }}</h3>
          <span class="tag-card__count">{{ tag_count }} post{% if tag_count != 1 %}s{% end %}</span>
        </a>
        {% end %}
      </div>
      {% else %}
      <p>No tags found.</p>
      {% end %}
    </article>
  </div>

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