{% extends "base.html" %}

{% block content %}
{# Two-column layout similar to docs - tag navigation in sidebar #}
<div class="docs-layout">
  {# Left Sidebar: Tag Navigation #}
  <aside class="docs-sidebar" id="tag-sidebar" role="navigation" aria-label="Tag navigation">
    {% set 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 | default('All Tags') }}</h1>
        <p class="page-description">
          Browse all {{ total_tags }} tags
        </p>
        <div style="margin-top: 1rem;">
          <a href="/graph/" 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 tags %}
      <div class="tag-cloud">
        {% for tag in tags %}
        <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{% endif %}</span>
          </a>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p>No tags found.</p>
      {% endif %}
    </article>
  </div>

  {# Right Sidebar: Empty for now (will be hidden by CSS, can add tag stats later) #}
  <aside class="docs-toc"></aside>
</div>

{# styles moved to components/tags.css #}
{% endblock %}