{% extends "base.html" %}

{#
Documentation List Template

Three-column layout optimized for documentation section index pages:
- Left sidebar: Navigation tree
- Center: Content + Content tiles (children + related)
- Right sidebar: Contextual Graph + TOC + metadata

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

Smart Defaults:
- Children shown with "In This Section" header
- Related pages shown with "Related Pages" header
- Both enabled by default - use discover: frontmatter to customize

Frontmatter (discover: structure):
  discover:
    children:
      title: "Custom Title"    # or false to hide
      variant: "cards"         # compact | cards | minimal
    children: false            # disable children entirely
    related:
      title: "Custom Title"
      limit: 5
    related: false             # disable related entirely
#}

{% from 'partials/navigation-components.html' import breadcrumbs, page_navigation, toc with context %}
{% from 'partials/content-components.html' import tag_list, content_tiles 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="Documentation navigation">
    {% include 'partials/docs-nav.html' %}
  </aside>

  {# Main Content #}
  <div class="docs-main">
    {# Page Hero: Breadcrumbs + Title + Description + Section Stats #}
    {# List pages default to 'overview' variant (shows page count instead of read time) #}
    {% set _list_hero_default = 'overview' %}
    {% include 'partials/page-hero.html' %}

    {# Article Content #}
    <article class="prose {% if page.metadata.get('css_class') %}{{ page.metadata.get('css_class') }}{% endif %}">

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

      {# Content tiles - children and related pages #}
      {# 
         Smart defaults: Both children and related enabled with default titles.
         Use discover: frontmatter only to customize or disable.
         
         discover:
           children:
             title: "Custom Title"    # or false to hide title
             variant: "cards"         # compact | cards | minimal
           children: false            # disable children entirely
           related:
             title: "Custom Title"
             limit: 5
           related: false             # disable related entirely
      #}
      {% set discover = page.metadata.get('discover', {}) if page else {} %}
      {% set children_config = discover.get('children', {}) if discover else {} %}
      {% set related_config = discover.get('related', {}) if discover else {} %}
      
      {# Check if explicitly disabled #}
      {% set children_disabled = children_config is sameas false %}
      {% set related_disabled = related_config is sameas false %}
      
      {# Feature flag fallback #}
      {% set show_children_feature = 'content.children' in site.theme_config.features %}
      {% set show_children = (not children_disabled) and show_children_feature %}
      {% set show_related = not related_disabled %}
      
      {# Get config values with smart defaults #}
      {% set children_title = children_config.get('title', 'In This Section') if children_config is mapping else 'In This Section' %}
      {% set children_variant = children_config.get('variant', 'compact') if children_config is mapping else 'compact' %}
      {% set related_title = related_config.get('title', 'Related Pages') if related_config is mapping else 'Related Pages' %}
      {% set related_limit = related_config.get('limit', 5) if related_config is mapping else (related_config if related_config is number else 5) %}
      
      {# Handle title: false to hide title #}
      {% set children_title = none if children_title is sameas false else children_title %}
      {% set related_title = none if related_title is sameas false else related_title %}
      
      {% set has_children = posts or subsections %}
      {% set has_related = show_related and page and page.related_posts %}
      
      {% if show_children and (has_children or has_related) %}
      <div class="docs-children">
        {{ content_tiles(
          title=children_title if has_children else none,
          children=posts if show_children else none,
          subsections=subsections if show_children else none,
          related=page.related_posts[:related_limit] if has_related else none,
          related_title=related_title,
          variant=children_variant,
          group_by='type' if has_children and has_related else none
        ) }}
      </div>
      {% endif %}

      {# Tags #}
      {% if 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: Contextual Graph + TOC + Metadata #}
  {% if toc_items %}
  <aside class="docs-toc" role="complementary" aria-label="Table of contents">
    {# Contextual Graph Minimap - shows connections to current page #}
    <div class="graph-contextual" data-page-url="{{ page.href }}">
      {# Placeholder - will be replaced by JavaScript #}
      <div class="graph-contextual-container graph-loading"
        style="min-height: 200px; opacity: 1 !important; visibility: visible !important;">
      </div>
    </div>

    {# 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">
  {{ icon('list', size=20) }}
</button>

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

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