{% extends "base.html" %}

{#
OpenAPI Reference Schema Template

Renders an OpenAPI schema's documentation using the autodoc skeleton.
Extends base.html to inherit theme navigation, sidebars, and styling.
Uses autodoc.css for all styling.

This template receives:
- element: DocElement for the schema
- 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 + Metadata #}
    {% include 'partials/page-hero.html' %}

    {# Article Content - autodoc skeleton #}
    <article data-autodoc data-type="openapi" data-element="schema" class="autodoc docs-content">

      {# Header #}
      <header class="autodoc-header">
        <div class="autodoc-badges">
          <span class="autodoc-badge" data-badge="schema">Schema</span>
        </div>

        <h1 class="autodoc-title">
          <code>{{ element.name }}</code>
        </h1>

        {% if element.description %}
        <div class="autodoc-description">
          <p>{{ element.description }}</p>
        </div>
        {% end %}
      </header>

      {# Schema Type #}
      {% if element.metadata.type %}
      <div class="autodoc-stats">
        <span class="autodoc-stat">
          <span class="autodoc-stat-label">Type:</span>
          <span class="autodoc-stat-value"><code>{{ element.metadata.type }}</code></span>
        </span>
      </div>
      {% end %}

      {# Properties #}
      {% if element.metadata.properties %}
      <section class="autodoc-section" data-section="properties">
        <h2 class="autodoc-section-title">Properties</h2>
        <table class="autodoc-table" data-table="properties">
          <thead>
            <tr>
              <th>Property</th>
              <th>Type</th>
              <th>Required</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {% set required_props = element.metadata.required ?? [] %}
            {% for prop_name, prop_schema in element.metadata.properties.items() %}
            <tr {% if prop_name in required_props %}data-required="true"{% end %}>
              <td class="autodoc-cell-name"><code>{{ prop_name }}</code></td>
              <td class="autodoc-cell-type"><code>{{ prop_schema.type ?? 'object' }}</code></td>
              <td>{% if prop_name in required_props %}Yes{% else %}No{% end %}</td>
              <td class="autodoc-cell-desc">{{ prop_schema.description ?? '—' }}</td>
            </tr>
            {% end %}
          </tbody>
        </table>
      </section>
      {% end %}

      {# Example #}
      {% if element.metadata.example %}
      <section class="autodoc-section" data-section="examples">
        <h2 class="autodoc-section-title">Example</h2>
        <div class="autodoc-example">
          <pre><code class="language-json">{{ element.metadata.example | tojson(indent=2) }}</code></pre>
        </div>
      </section>
      {% end %}

      {# Tags #}
      {% if page.tags %}
      <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 #}
    {{ 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 %}