{#
  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.

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

  Example:
    {{ page_navigation(page) }}
#}
{% macro page_navigation(page) %}
{% 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 %}
{% 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 %}