{#
Navigation Components

Reusable macro-based navigation components for the Bengal default theme.

Components:
- breadcrumbs(page): Hierarchical breadcrumb navigation
- pagination(current_page, total_pages, base_url): Page number controls
- page_navigation(page): Sequential prev/next page links
- section_navigation(page): Section statistics and subsection cards
- toc(toc_items=None, toc=None, page=None): Table of contents sidebar

Usage:
{% from 'partials/navigation-components.html' import breadcrumbs, pagination %}
{{ breadcrumbs(page) }}
{{ pagination(current_page=2, total_pages=10, base_url='/blog/') }}
#}

{#
Breadcrumbs Component

Displays hierarchical navigation showing the current page's location in the site structure.

Args:
page: Current page object (required)

Example:
{{ breadcrumbs(page) }}
#}
{% macro breadcrumbs(page) %}
{% set breadcrumb_items = get_breadcrumbs(page) %}
{% if breadcrumb_items %}
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    {% for item in breadcrumb_items %}
    <li{% if item.is_current %} aria-current="page" {% endif %}>
      {% if item.is_current %}
      {{ item.title }}
      {% else %}
      <a href="{{ item.url }}">{{ item.title }}</a>
      {% endif %}
      </li>
      {% endfor %}
  </ol>
</nav>
{% endif %}
{% endmacro %}

{#
Pagination Component

Displays page number controls for paginated content with prev/next buttons.

Args:
current_page: Current page number (1-indexed, required)
total_pages: Total number of pages (required)
base_url: Base URL for pagination (e.g., '/blog/', required)

Example:
{{ pagination(current_page=2, total_pages=10, base_url='/blog/') }}
#}
{% macro pagination(current_page, total_pages, base_url) %}
{% if total_pages > 1 %}
{% set p = get_pagination_items(current_page, total_pages, base_url) %}

<nav class="pagination" role="navigation" aria-label="Pagination">
  <ul>
    {# Previous Button #}
    <li>
      {% if p.prev %}
      <a href="{{ p.prev.url }}" aria-label="Previous page">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Previous
      </a>
      {% else %}
      <span class="disabled">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Previous
      </span>
      {% endif %}
    </li>

    {# Page Numbers #}
    {% for item in p.pages %}
    <li>
      {% if item.is_ellipsis %}
      <span class="ellipsis">...</span>
      {% elif item.is_current %}
      <span class="active" aria-current="page">{{ item.num }}</span>
      {% else %}
      <a href="{{ item.url }}">{{ item.num }}</a>
      {% endif %}
    </li>
    {% endfor %}

    {# Next Button #}
    <li>
      {% if p.next %}
      <a href="{{ p.next.url }}" aria-label="Next page">
        Next
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </a>
      {% else %}
      <span class="disabled">
        Next
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </span>
      {% endif %}
    </li>
  </ul>
</nav>
{% endif %}
{% endmacro %}

{#
Page Navigation Component

Displays previous/next page links for sequential navigation through content.

Intelligently chooses navigation scope based on content type:
- doc, tutorial, api-reference, cli-reference: Section-scoped navigation (respects weight order)
- blog, page, others: Global navigation (chronological order)

Args:
page: Current page object with prev and next attributes (required)

Example:
{{ page_navigation(page) }}
#}
{% macro page_navigation(page) %}
{# Determine which navigation to use based on content type #}
{% set content_type = page.metadata.get('type', 'page') %}
{% set section_types = ['doc', 'tutorial', 'api-reference', 'cli-reference', 'changelog'] %}
{% set use_section_nav = content_type in section_types %}

{% if use_section_nav %}
{# Section-scoped navigation (within same section, respects weight) #}
{% if page.prev_in_section or page.next_in_section %}
<nav class="page-navigation" aria-label="Page navigation">
  <div class="nav-links">
    {% if page.prev_in_section %}
    <div class="nav-previous">
      <a href="{{ url_for(page.prev_in_section) }}" rel="prev">
        <span class="nav-subtitle">← Previous</span>
        <span class="nav-title">{{ page.prev_in_section.title }}</span>
      </a>
    </div>
    {% endif %}

    {% if page.next_in_section %}
    <div class="nav-next">
      <a href="{{ url_for(page.next_in_section) }}" rel="next">
        <span class="nav-subtitle">Next →</span>
        <span class="nav-title">{{ page.next_in_section.title }}</span>
      </a>
    </div>
    {% endif %}
  </div>
</nav>
{% endif %}
{% else %}
{# Global navigation (across entire site, chronological) #}
{% if page.prev or page.next %}
<nav class="page-navigation" aria-label="Page navigation">
  <div class="nav-links">
    {% if page.prev %}
    <div class="nav-previous">
      <a href="{{ url_for(page.prev) }}" rel="prev">
        <span class="nav-subtitle">← Previous</span>
        <span class="nav-title">{{ page.prev.title }}</span>
      </a>
    </div>
    {% endif %}

    {% if page.next %}
    <div class="nav-next">
      <a href="{{ url_for(page.next) }}" rel="next">
        <span class="nav-subtitle">Next →</span>
        <span class="nav-title">{{ page.next.title }}</span>
      </a>
    </div>
    {% endif %}
  </div>
</nav>
{% endif %}
{% endif %}
{% endmacro %}

{#
Section Navigation Component

Displays statistics and subsection cards for exploring a section hierarchy.

Args:
page: Current page/section object (required)

Note:
This component expects a Section object with regular_pages and sections attributes.
The variable name 'page' is maintained for backwards compatibility but should be 'section'.

Example:
{{ section_navigation(page) }}
#}
{% macro section_navigation(page) %}
{% if page.regular_pages is defined or page.sections is defined %}
<div class="section-navigation">
  {# Section stats - dogfooding regular_pages and sections properties #}
  <div class="section-stats">
    <p class="stat">
      <strong>{{ page.regular_pages | length }}</strong> pages in this section
    </p>
    {% if page.sections %}
    <p class="stat">
      <strong>{{ page.sections | length }}</strong> subsections
    </p>
    {% endif %}
    {% if page.regular_pages_recursive | length > page.regular_pages | length %}
    <p class="stat">
      <strong>{{ page.regular_pages_recursive | length }}</strong> total pages (including subsections)
    </p>
    {% endif %}
  </div>

  {# Subsections - dogfooding page.sections #}
  {% if page.sections %}
  <div class="subsections">
    <h2>Subsections</h2>
    <div class="subsection-grid">
      {% for subsection in page.sections %}
      <div class="subsection-card">
        <h3>
          <a href="{{ url_for(subsection) }}">{{ subsection.title }}</a>
        </h3>
        {% if subsection.metadata.get('description', '') %}
        <p>{{ subsection.metadata.get('description', '') }}</p>
        {% endif %}
        <p class="subsection-meta">
          {{ subsection.regular_pages | length }} pages
        </p>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
{% endif %}
{% endmacro %}

{#
Table of Contents Sidebar Component

Interactive table of contents with progress tracking, collapsible sections, and page metadata.

Args:
toc_items: List of TOC items with id, title, level (optional, defaults to None)
toc: HTML TOC fallback (optional, defaults to None)
page: Current page object for metadata (optional, defaults to None)

Example:
{{ toc(toc_items=toc_items, page=page) }}
#}
{% macro toc(toc_items=None, toc=None, page=None) %}
<div class="toc-sidebar">
  {# TOC Header - Minimal #}
  <div class="toc-header">
    <h3 class="toc-title">On This Page</h3>
    <button class="toc-settings-btn" data-toc-action="toggle-settings" title="TOC settings" aria-label="TOC settings"
      aria-expanded="false">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="12" cy="5" r="1"></circle>
        <circle cx="12" cy="19" r="1"></circle>
      </svg>
    </button>
    {# Settings dropdown (hidden by default) #}
    <div class="toc-settings-menu" hidden>
      <button data-toc-action="expand-all">Expand all</button>
      <button data-toc-action="collapse-all">Collapse all</button>
    </div>
  </div>

  {# Scroll Progress Indicator - Subtle #}
  <div class="toc-progress" aria-hidden="true">
    <div class="toc-progress-bar"></div>
  </div>

  {# Table of Contents #}
  <nav class="toc-nav" aria-label="Table of contents" data-toc-mode="normal">
    {% if toc_items %}
    <div class="toc-scroll-container">
      <ul class="toc-items" role="tree">
        {#
        Use get_toc_grouped() to handle all grouping logic in Python.
        This replaces 80+ lines of complex template logic with a clean iteration.
        See: bengal/rendering/template_functions/navigation.py
        #}
        {% for group in get_toc_grouped(toc_items) %}
        {% if group.is_group %}
        {# Group with children (collapsible section) #}
        <li class="toc-item toc-group" role="treeitem" data-level="1" data-collapsed="true">
          <div class="toc-group-header">
            <a href="#{{ group.header.id }}" class="toc-link toc-link-h2" data-toc-item="#{{ group.header.id }}">
              {{ group.header.title }}
            </a>
            <button class="toc-group-toggle toc-count-toggle" aria-expanded="false"
              aria-label="Toggle {{ group.children|length }} subsections"
              title="Click to expand {{ group.children|length }} subsections">
              <span class="toc-count">{{ group.children|length }}</span>
            </button>
          </div>
          <ul class="toc-subitems" role="group">
            {% for child in group.children %}
            <li class="toc-item toc-level-{{ child.level }}" role="treeitem" data-level="{{ child.level }}">
              <a href="#{{ child.id }}" class="toc-link" data-toc-item="#{{ child.id }}">
                {{ child.title }}
              </a>
            </li>
            {% endfor %}
          </ul>
        </li>
        {% else %}
        {# Standalone item (no children) #}
        <li class="toc-item toc-level-{{ group.header.level }}" role="treeitem" data-level="{{ group.header.level }}">
          <a href="#{{ group.header.id }}" class="toc-link" data-toc-item="#{{ group.header.id }}">
            {{ group.header.title }}
          </a>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
    {% else %}
    {# Fallback to HTML TOC #}
    <div class="toc-content">
      {{ toc | safe }}
    </div>
    {% endif %}
  </nav>

  {# Page Metadata Section #}
  {% if page %}
  <div class="toc-metadata">
    {# Last Updated #}
    {% if page.date %}
    <div class="toc-meta-item">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"></circle>
        <polyline points="12 6 12 12 16 14"></polyline>
      </svg>
      <div>
        <div class="toc-meta-label">Last updated</div>
        <time datetime="{{ page.date | date_iso }}" class="toc-meta-value">
          {{ page.date | time_ago }}
        </time>
      </div>
    </div>
    {% endif %}

    {# Edit on GitHub (if configured) #}
    {% if page.metadata.get('edit_url') or site.config.get('github_edit_base') %}
    <a href="{% if page.metadata.get('edit_url') %}{{ page.metadata.get('edit_url') }}{% else %}{{ site.config.get('github_edit_base') }}{{ page.source_path }}{% endif %}"
      class="toc-edit-link" target="_blank" rel="noopener noreferrer">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
      </svg>
      <span>Edit this page</span>
    </a>
    {% endif %}

    {# Contributors (if configured) #}
    {% if page.metadata.get('contributors') %}
    <div class="toc-meta-item">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
      </svg>
      <div>
        <div class="toc-meta-label">Contributors</div>
        <div class="toc-meta-value">{{ page.metadata.get('contributors') | join(', ') }}</div>
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endmacro %}