{% extends "base.html" %}

{#
API Reference Section Index Template

Renders an API section index page showing subsections and modules
using a card-based layout. Extends base.html to inherit theme navigation.
Uses autodoc.css for all styling.

This template receives:
- section: Section object for the API section
- config: Autodoc configuration
- site: Site instance
#}

{% from 'partials/navigation-components.html' import breadcrumbs, page_navigation, toc %}

{% block content %}
{# Three-column documentation layout #}
<div class="docs-layout">
  {# Left Sidebar: Navigation #}
  <aside class="docs-sidebar" id="docs-sidebar" role="navigation" aria-label="API navigation">
    {% include 'partials/docs-nav.html' %}
  </aside>

  {# Main Content #}
  <div class="docs-main">
    {# Page Hero: Breadcrumbs + Title + Description + Stats #}
    {% from 'partials/page-hero/_macros.html' import hero_section %}
    {{ hero_section(section, page, {}) }}

    {# Article Content - autodoc skeleton #}
    <article data-autodoc data-type="python" data-element="section-index" class="autodoc docs-content">

      {# Build module list once for cards #}
      {% set module_pages = [] %}
      {% if section %}
      {% for page in section.sorted_pages %}
      {% if page != section.index_page and not (page.source_path is match('.*_index.*')) %}
      {% set _ = module_pages.append(page) %}
      {% end %}
      {% end %}
      {% end %}

      {# Subsections (Packages) - Card Grid #}
      {% if section and section.sorted_subsections %}
      <section class="autodoc-section" data-section="packages">
        <h2 class="autodoc-section-title">Packages</h2>

        <div class="autodoc-cards">
          {% for subsection in section.sorted_subsections %}
          {% if subsection.name %}
          {% set desc = subsection.metadata.description | default('') | first_sentence %}
          {% set child_count = (subsection.subsections | length) + (subsection.pages | length) %}
          <a href="{{ subsection.href }}" class="autodoc-card" data-card="package">
            <div class="autodoc-card-header">
              <span class="autodoc-card-icon">{{ icon("folder", size=20, css_class="icon-muted") }}</span>
              <span class="autodoc-card-name">{{ subsection.name | title }}</span>
            </div>
            <div class="autodoc-card-body">
              {% if desc %}
              <p class="autodoc-card-desc">{{ desc }}</p>
              {% else %}
              <p class="autodoc-card-desc">{{ subsection.name | title }} package</p>
              {% end %}
            </div>
            <div class="autodoc-card-footer">
              <span class="autodoc-card-meta">
                {{ child_count }} item{{ 's' if child_count != 1 else '' }}
              </span>
            </div>
          </a>
          {% end %}
          {% end %}
        </div>
      </section>
      {% end %}

      {# Module Pages - Card Grid #}
      {% if module_pages %}
      <section class="autodoc-section" data-section="modules">
        <h2 class="autodoc-section-title">Modules</h2>

        <div class="autodoc-cards">
          {% for page in module_pages %}
          {% set desc = params.description | default('') | first_sentence %}
          <a href="{{ page.href }}" class="autodoc-card" data-card="{{ params.element_type ?? 'module' }}">
            <div class="autodoc-card-header">
              <span class="autodoc-card-icon">
                {%- if params.element_type == 'class' -%}
                {{ icon("layers", size=16, css_class="icon-info") }}
                {%- elif params.element_type == 'function' -%}
                {{ icon("zap", size=16, css_class="icon-success") }}
                {%- else -%}
                {{ icon("code", size=16, css_class="icon-muted") }}
                {% end %}
              </span>
              <span class="autodoc-card-name">{{ page.title }}</span>
              {% if params.element_type %}
              <span class="autodoc-badge" data-badge="{{ params.element_type }}">{{ params.element_type }}</span>
              {% end %}
            </div>
            <div class="autodoc-card-body">
              {% if desc %}
              <p class="autodoc-card-desc">{{ desc }}</p>
              {% else %}
              <p class="autodoc-card-desc">No description available</p>
              {% end %}
            </div>
          </a>
          {% end %}
        </div>
      </section>
      {% end %}

      {# Empty State #}
      {% if not section or (not section.subsections and not module_pages) %}
      <div class="autodoc-empty-state">
        <div class="autodoc-empty-state-icon">{{ icon("file-text", size=48, css_class="icon-muted") }}</div>
        <p class="autodoc-empty-state-text">No documentation available in this section yet.</p>
      </div>
      {% end %}

    </article>

    {# Page navigation (prev/next) at bottom #}
    {{ page_navigation(page) }}
  </div>

  {# Right Sidebar: Contextual Graph + TOC + Metadata #}
  {% include 'partials/docs-toc-sidebar.html' %}
</div>

{# Mobile sidebar toggle button #}
<button class="docs-sidebar-toggle" aria-label="Toggle navigation sidebar" aria-expanded="false"
  aria-controls="docs-sidebar">
  {{ icon('list', size=20) }}
</button>

{# Sidebar overlay for mobile #}
<div class="docs-sidebar-overlay" aria-hidden="true"></div>
{% end %}