{% 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 total_tags = total_tags ?? (all_tags | length) %}

{# 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">
    {# Action Bar: Breadcrumbs + Share #}
    {% include 'partials/action-bar.html' %}

    <article class="prose">
      <header class="page-header">
        <h1>{{ page_title }}</h1>
        <p class="page-description">
          Browse all {{ total_tags }} tags
        </p>
        <div style="margin-top: 1rem;">
          <a href="{{ '/graph/' | absolute_url }}" class="button button-outline"
            style="display: inline-flex; align-items: center; gap: 0.5rem;">
            <span>🗺️</span>
            <span>Explore Knowledge Graph</span>
          </a>
        </div>
      </header>

      {% if all_tags | length > 0 %}
      <div class="tag-cloud">
        {% for tag in all_tags %}
        {% let tag_name = tag?.name ?? '' %}
        {% let tag_count = tag?.count ?? 0 %}
        <div class="tag-item">
          <a href="{{ tag_url(tag_name) }}" class="tag-link">
            <span class="tag-name">{{ tag_name }}</span>
            <span class="tag-count">{{ tag_count }} post{% if tag_count != 1 %}s{% end %}</span>
          </a>
        </div>
        {% end %}
      </div>
      {% else %}
      <p>No tags found.</p>
      {% end %}
    </article>
  </div>

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