{% extends "base.html" %}

{% block title %}{{ category.label | e }}{% endblock %}
{% block meta_description %}Browse {{ category.label | e }} documentation - {{ documents | length }} document{{ 's' if documents | length != 1 else '' }} available.{% endblock %}

{# Recursive macro for sidebar navigation tree #}
{% macro render_nav_tree(items) %}
<ul class="sidebar-tree">
  {% for item in items %}
  <li class="sidebar-tree-item{% if item.active %} sidebar-tree-item--active{% endif %}{% if item.expanded %} sidebar-tree-item--expanded{% endif %}">
    {% if item.children %}
    <details{% if item.expanded %} open{% endif %}>
      <summary>
        <a href="{{ item.url }}" class="sidebar-link{% if item.active %} sidebar-link--active{% endif %}">
          {{ item.label | e }}
        </a>
      </summary>
      {{ render_nav_tree(item.children) }}
    </details>
    {% else %}
    <a href="{{ item.url }}" class="sidebar-link{% if item.active %} sidebar-link--active{% endif %}">
      {{ item.label | e }}
    </a>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endmacro %}

{% block sidebar_content %}
  <div class="sidebar-section">
    <h3 class="sidebar-heading">Navigation</h3>
    {% if nav_tree %}
    {{ render_nav_tree(nav_tree) }}
    {% endif %}
  </div>
{% endblock %}

{% block content %}
  <section class="category-page">
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item">
          <a href="/docs/">Home</a>
        </li>
        {% for crumb in breadcrumbs %}
        <li class="breadcrumb-item{% if loop.last %} breadcrumb-item--current{% endif %}">
          {% if loop.last %}
          <span aria-current="page">{{ crumb.label | e }}</span>
          {% else %}
          <a href="{{ crumb.url }}">{{ crumb.label | e }}</a>
          {% endif %}
        </li>
        {% endfor %}
      </ol>
    </nav>

    <header class="category-header">
      <h1 class="category-title">{{ category.label | e }}</h1>
      {% if category.description %}
      <p class="category-description">{{ category.description | e }}</p>
      {% endif %}
    </header>

    {% if subcategories %}
    <section class="subcategories">
      <h2 class="section-title">Subcategories</h2>
      <div class="card-grid">
        {% for sub in subcategories %}
        <a href="/docs/{{ sub.name }}/" class="category-card">
          <h3 class="category-card-title">{{ sub.label | e }}</h3>
          <p class="category-card-count">{{ sub.document_count }} document{{ 's' if sub.document_count != 1 else '' }}</p>
          {% if sub.description %}
          <p class="category-card-desc">{{ sub.description | e }}</p>
          {% endif %}
        </a>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <section class="document-list">
      <h2 class="section-title">Documents</h2>
      {% if documents %}
      <div class="doc-list">
        {% for doc in documents %}
        <article class="doc-list-item">
          <h3 class="doc-list-title">
            <a href="{{ doc.url }}">{{ doc.title | e }}</a>
          </h3>

          {% if doc.excerpt %}
          <p class="doc-list-excerpt">{{ doc.excerpt | e }}</p>
          {% endif %}

          <div class="doc-list-meta">
            {% if doc.tags %}
            <div class="doc-tags">
              {% for tag in doc.tags %}
              <a href="/docs/tags/{{ tag | e }}" class="tag-pill tag-pill--small">{{ tag | e }}</a>
              {% endfor %}
            </div>
            {% endif %}

            {% if doc.last_modified %}
            <time class="doc-list-date" datetime="{{ doc.last_modified }}">
              {{ doc.last_modified }}
            </time>
            {% endif %}
          </div>
        </article>
        {% endfor %}
      </div>
      {% else %}
      <p class="empty-state">No documents in this category yet.</p>
      {% endif %}
    </section>
  </section>
{% endblock %}