{% extends "base.html" %}

{#
================================================================================
CLI Reference Template (Kida-Native)
================================================================================

Three-column layout optimized for CLI documentation sites:
- Left sidebar: Navigation tree
- Center: Content
- Right sidebar: TOC + metadata

Usage: Set `template: autodoc/cli/single.html` in frontmatter
Or set `type: autodoc-cli` to auto-select this template

TEMPLATE VARIABLES:
  - page: Page object with title, metadata, tags (required)
  - content: Rendered HTML content
  - params: Cascading parameters (page → section → site)
  - toc_items: Table of contents items
  - toc: Rendered TOC HTML

KIDA FEATURES USED:
  - Optional chaining (?.) for safe attribute access
  - Null coalescing (??) for defaults
  - {% let %} for template-scoped caching

================================================================================
#}

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

{% block content %}
{# Template-scoped caching #}
{% let page_tags = page?.tags ?? [] %}
{% let css_class = params?.css_class ?? '' %}
{% let toc_list = toc_items ?? [] %}

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

  {# Main Content #}
  <div class="docs-main">
    {# Page Hero: Breadcrumbs + Title + Description #}
    {% include 'partials/page-hero.html' %}

    {# Article Content - flattened structure #}
    <article class="prose docs-content{% if css_class %} {{ css_class }}{% end %}">
      {{ content | safe }}

      {# Tags #}
      {% if page_tags | length > 0 %}
      <footer class="docs-footer">
        {{ tag_list(page_tags) }}
      </footer>
      {% end %}
    </article>

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

  {# Right Sidebar: TOC + Metadata #}
  {% if toc_list | length > 0 %}
  <aside class="docs-toc" role="complementary" aria-label="Table of contents">
    {{ toc(toc_items=toc_list, toc=toc, page=page) }}
  </aside>
  {% end %}
</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 %}

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