{% extends "base.html" %}

{#
CLI Reference Section Index Template

Renders a CLI section index page showing command groups and commands
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 CLI section
- config: Autodoc configuration
- site: Site instance
#}

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

{% block content %}
{# 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 + Stats (with CLI labels) #}
    {% set hero_context = {'is_cli': true} %}
    {% include 'partials/page-hero/section.html' %}

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

      {# Subsections (Command Groups) - Card Grid #}
      {% if section and section.sorted_subsections %}
      <section class="autodoc-section" data-section="groups">
        <h2 class="autodoc-section-title">Command Groups</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="group">
            <div class="autodoc-card-header">
              <span class="autodoc-card-icon">{{ icon("terminal", size=20, css_class="icon-muted") }}</span>
              <span class="autodoc-card-name">{{ subsection.name }}</span>
            </div>
            <div class="autodoc-card-body">
              {% if desc %}
              <p class="autodoc-card-desc">{{ desc }}</p>
              {% else %}
              <p class="autodoc-card-desc">{{ subsection.name }} commands</p>
              {% endif %}
            </div>
            <div class="autodoc-card-footer">
              <span class="autodoc-card-meta">
                {{ child_count }} command{{ 's' if child_count != 1 else '' }}
              </span>
            </div>
          </a>
          {% endif %}
          {% endfor %}
        </div>
      </section>
      {% endif %}

      {# Command Pages - Card Grid #}
      {% set command_pages = [] %}
      {% if section %}
      {% for page in section.sorted_pages %}
        {% if page != section.index_page and not (page.source_path is match('.*_index.*')) %}
          {% set _ = command_pages.append(page) %}
        {% endif %}
      {% endfor %}
      {% endif %}

      {% if command_pages %}
      <section class="autodoc-section" data-section="commands">
        <h2 class="autodoc-section-title">Commands</h2>

        <div class="autodoc-cards">
          {% for page in command_pages %}
          {% set desc = page.metadata.description | default('') | first_sentence %}
          <a href="{{ page.href }}" class="autodoc-card" data-card="{{ page.metadata.element_type | default('command') }}">
            <div class="autodoc-card-header">
              <span class="autodoc-card-icon">
                {%- if page.metadata.element_type == 'group' -%}
                {{ icon("folder", size=16, css_class="icon-info") }}
                {%- else -%}
                {{ icon("terminal", size=16, css_class="icon-success") }}
                {%- endif -%}
              </span>
              <span class="autodoc-card-name">{{ page.title }}</span>
              {% if page.metadata.element_type %}
              <span class="autodoc-badge" data-badge="{{ page.metadata.element_type }}">{{ page.metadata.element_type }}</span>
              {% endif %}
            </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>
              {% endif %}
            </div>
          </a>
          {% endfor %}
        </div>
      </section>
      {% endif %}

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

    </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>
{% endblock %}