{% extends "base.html" %}

{#
API Reference List Template

Three-column layout optimized for API documentation section index pages:
- Left sidebar: Navigation tree
- Center: Content + Child page tiles
- Right sidebar: TOC + metadata

Usage: Set `template: api-reference/list.html` in frontmatter
Or set `type: api-reference` to auto-select this template

Features:
- Automatically displays child pages and subsections as tiles
- Disable with `show_children: false` in frontmatter
#}

{% from 'partials/navigation-components.html' import breadcrumbs, page_navigation, toc with context %}
{% from 'partials/content-components.html' import tag_list, child_page_tiles with context %}

{% block content %}
{# Ensure page is set - use section.index_page if page not defined #}
{# This is needed for breadcrumbs, sidebar navigation, and content rendering #}
{% if not page is defined and section is defined %}
{% set page = section.index_page %}
{% endif %}

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

        {# Article Content #}
        <article
            class="prose {% if page and page.metadata.get('css_class') %}{{ page.metadata.get('css_class') }}{% endif %}">
            <header class="page-header">
                <h1>{{ page.title if page else (section.title if section else 'API Reference') }}</h1>

                {% if page and page.metadata.get('description', '') %}
                <p class="lead">{{ page.metadata.get('description', '') }}</p>
                {% elif section and section.metadata.get('description', '') %}
                <p class="lead">{{ section.metadata.get('description', '') }}</p>
                {% endif %}
            </header>

            {# Main content #}
            <div class="docs-content">
                {{ content | safe }}
            </div>

            {# Child page tiles - can be disabled via frontmatter: show_children: false or theme config #}
            {% set show_children_fm = page.metadata.get('show_children', none) if page else none %}
            {% set show_children_theme = site.theme_config.config.get('show_children_default', true) %}
            {% set show_children = show_children_fm if show_children_fm is not none else show_children_theme %}
            {% if show_children and (posts or subsections) %}
            <div class="docs-children">
                {{ child_page_tiles(posts=posts, subsections=subsections) }}
            </div>
            {% endif %}

            {# Tags #}
            {% if page and page.tags %}
            <footer class="docs-footer">
                {{ tag_list(page.tags) }}
            </footer>
            {% endif %}
        </article>

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

    {# Right Sidebar: TOC + Metadata #}
    {% if toc_items %}
    <aside class="docs-toc" role="complementary" aria-label="Table of contents">
        {{ toc(toc_items=toc_items, toc=toc, page=page) }}
    </aside>
    {% endif %}
</div>

{# Mobile sidebar toggle button #}
<button class="docs-sidebar-toggle" aria-label="Toggle navigation sidebar" aria-expanded="false"
    aria-controls="docs-sidebar">
    <svg viewBox="0 0 24 24">
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
</button>

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

{# Sidebar toggle functionality is handled by interactive.js #}