{% extends "base.html" %}

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

Renders a CLI command's documentation using the unified autodoc skeleton.
Extends base.html to inherit theme navigation, sidebars, and styling.

TEMPLATE VARIABLES:
  - element: DocElement for the command (required)
  - page: PageContext proxy with title, metadata, tags, _path
  - config: Autodoc configuration
  - site: Site instance
  - section: Parent section (for navigation)

Uses the `options` filter to normalize access to options/arguments,
providing a consistent API via OptionView:
  - name, flags, flags_str, type, description
  - default, required, is_flag, is_argument, multiple, envvar

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

{% from 'partials/navigation-components.html' import breadcrumbs, page_navigation, toc %}
{% from 'autodoc/partials/_macros/element-card.html' import element_card %}

{% block content %}
{# Use options filter for normalized access - returns list of OptionView #}
{% let all_opts = element | options %}
{% let cli_options = all_opts | rejectattr('is_argument') | list %}
{% let cli_arguments = all_opts | selectattr('is_argument') | list %}
{% let page_tags = page?.tags ?? [] %}

{# 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: Use direct macro call with explicit context #}
    {% from 'partials/page-hero/_macros.html' import hero_element %}
    {{ hero_element(element, page, config) }}

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

      {# Usage #}
      {% include 'autodoc/partials/usage.html' %}

      {# Options (as table) - using OptionView properties #}
      {% if cli_options | length > 0 %}
      <section class="autodoc-section" data-section="options">
        <h2 class="autodoc-section-title">Options</h2>
        <table class="autodoc-table" data-table="options">
          <thead>
            <tr>
              <th>Option</th>
              <th>Type</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {% for opt in cli_options %}
            <tr>
              <td class="autodoc-cell-name">
                <code>{{ opt.flags_str }}</code>
                {% if opt.required %}
                <span class="autodoc-badge" data-badge="required">required</span>
                {% end %}
                {% if opt.is_flag %}
                <span class="autodoc-badge" data-badge="flag">flag</span>
                {% end %}
              </td>
              <td class="autodoc-cell-type"><code>{{ opt.type }}</code></td>
              <td class="autodoc-cell-desc">
                {{ opt.description | markdownify | safe }}
                {% if opt.default is not none and opt.default != '' and not opt.is_flag %}
                <span class="autodoc-param-default">Default: <code>{{ opt.default }}</code></span>
                {% end %}
                {% if opt.envvar %}
                <span class="autodoc-param-envvar">Env: <code>{{ opt.envvar }}</code></span>
                {% end %}
              </td>
            </tr>
            {% end %}
          </tbody>
        </table>
      </section>
      {% end %}

      {# Arguments (as table) - using OptionView properties #}
      {% if cli_arguments | length > 0 %}
      <section class="autodoc-section" data-section="arguments">
        <h2 class="autodoc-section-title">Arguments</h2>
        <table class="autodoc-table" data-table="arguments">
          <thead>
            <tr>
              <th>Argument</th>
              <th>Type</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {% for arg in cli_arguments %}
            <tr>
              <td class="autodoc-cell-name">
                <code>{{ arg.name }}</code>
                {% if arg.required %}
                <span class="autodoc-badge" data-badge="required">required</span>
                {% end %}
                {% if arg.multiple %}
                <span class="autodoc-badge" data-badge="multiple">multiple</span>
                {% end %}
              </td>
              <td class="autodoc-cell-type"><code>{{ arg.type }}</code></td>
              <td class="autodoc-cell-desc">
                {{ arg.description | markdownify | safe }}
                {% if arg.default is not none and arg.default != '' %}
                <span class="autodoc-param-default">Default: <code>{{ arg.default }}</code></span>
                {% end %}
              </td>
            </tr>
            {% end %}
          </tbody>
        </table>
      </section>
      {% end %}

      {# Examples #}
      {% include 'autodoc/partials/examples.html' %}

      {# Tags - with null-safe access #}
      {% if page_tags | length > 0 %}
      <footer class="docs-footer">
        <span class="docs-footer-label">Tagged</span>
        {% from 'partials/components/tags.html' import tag_list %}
        {{ tag_list(page_tags) }}
      </footer>
      {% end %}
    </article>

    {# Page navigation (prev/next) at bottom - null-safe #}
    {% if page %}
    {{ page_navigation(page) }}
    {% end %}
  </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 %}