{% extends "base.html" %}

{% block title %}{{ page.title or site_name }}{% endblock %}

{#
  The display title used both by `og:title` below and
  by the `<h1>` in `{% block content %}` -- one fallback chain (title ->
  first heading -> filename stem), not two copies that could drift. Set
  here, outside any block, so both `{% block head %}` and
  `{% block content %}` (of THIS child template) can read it: a Jinja
  child template's own top-level `{% set %}` statements are visible inside
  its block bodies, confirmed by direct testing against Jinja's real
  scoping behavior before relying on it here.
#}
{% set page_title = page.title or (page.headings[0].text if page.headings else page.path.stem) %}
{% set page_description = page.description or site_description %}

{#
  Per-page SEO tags. Meta description is unconditional --
  it needs no absolute URL, just `page.description` (empty string, never
  `None`, when a page has no `description:` frontmatter -- see
  `content/page.py`) falling back to `site_description`
  (`Config.SITE_DESCRIPTION`, injected by `mdzero/web/app.py`'s context
  processor).

  Canonical + the full OpenGraph block are gated together on `site_url`
  (`Config.SITE_URL`, same context processor) being set: every one of
  these tags needs an absolute URL to be meaningful (`og:title`/
  `og:description`/`og:type` included -- a documented choice, not an
  oversight: emitting a partial, URL-less OpenGraph block when the site
  has no known public base URL is arguably more misleading to a scraper
  than omitting OpenGraph entirely, matching how canonical itself is
  omitted rather than pointing at a broken `http://None/...` URL). Scoped
  to `page.html` specifically (not `base.html`, where `{% block head %}`
  is declared empty) so the bundled `404.html` -- which extends
  `base.html` directly and never overrides this block -- never inherits
  any of these tags, regardless of `site_url`.

  `is_error_page`: true only for a custom
  `docs/404.md` page rendered through this same template on a 404
  response (`mdzero/web/errors.py` and `mdzero/build/generator.py` both
  pass it). Such a page IS routable at some route (e.g. "/404") but is
  never the canonically correct way to reach that content -- a scraper
  following `canonical`/`og:url` there would land on a 404. So on an
  error page: emit `robots: noindex` and skip the canonical/OpenGraph
  block entirely, regardless of `site_url`.
#}
{% block head %}
<meta name="description" content="{{ page_description }}">
{% if is_error_page %}
<meta name="robots" content="noindex">
{% elif site_url %}
{% set canonical_url = build_absolute_url(site_url, page.route) %}
<link rel="canonical" href="{{ canonical_url }}">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:description" content="{{ page_description }}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ canonical_url }}">
{% endif %}
{% endblock %}

{#
  Sidebar nav rendering.

  `icon:` (optional frontmatter, a literal character/emoji, e.g.
  `icon: 🚀` -- see `NavNode.icon`) renders in a fixed-width `.nav-icon`
  span so pages without one don't shift the label of siblings that have
  one.

  Any node with children (a synthetic group with no `index.md`, OR a real
  page that also has subpages) is collapsible: its children sit in a
  `hidden`-toggled `.nav-group-children` div (same attribute
  `search-dialog.js` already uses for the search overlay). `_branch_is_active`
  decides the pre-JS default (a section containing the current page starts
  expanded, so a reader is never dropped onto a page whose own section
  looks collapsed); the blocking script right after `#sidebar-nav` then
  applies any per-visitor `localStorage` override before first paint, same
  technique as the dark-mode script above. `data-nav-id` is a tree
  position path (`"0-2-1"`, ...) rather than a title slug -- stable across
  renders with no risk of collisions or awkward characters.
#}
{% macro _branch_is_active(nodes, target_route) %}
{%- for node in nodes -%}
  {%- if node.route == target_route -%}1{%- endif -%}
  {%- if node.children -%}{{ _branch_is_active(node.children, target_route) }}{%- endif -%}
{%- endfor -%}
{% endmacro %}
{% macro render_nav(nodes, path_prefix="") %}
<ul>
  {% for node in nodes %}
  {% set nav_id = path_prefix ~ loop.index0 %}
  {% set is_active_branch = (_branch_is_active(node.children, page.route) | trim) if node.children else "" %}
  <li>
    <div class="nav-item-row">
      {% if node.route %}
        <a href="{{ node.route }}"{% if node.route == page.route %} aria-current="page"{% endif %}><span class="nav-icon" aria-hidden="true">{{ node.icon or "" }}</span><span class="nav-label">{{ node.title }}</span></a>
        {% if node.children %}
        <button type="button" class="nav-group-toggle" data-nav-id="{{ nav_id }}" aria-expanded="{{ 'true' if is_active_branch else 'false' }}"{% if is_active_branch %} data-default-open="1"{% endif %} aria-label="Toggle {{ node.title }} section">
          <span class="nav-group-chevron" aria-hidden="true"></span>
        </button>
        {% endif %}
      {% else %}
        <button type="button" class="nav-group" data-nav-id="{{ nav_id }}" aria-expanded="{{ 'true' if is_active_branch else 'false' }}"{% if is_active_branch %} data-default-open="1"{% endif %}>
          <span class="nav-group-chevron" aria-hidden="true"></span>
          <span class="nav-icon" aria-hidden="true">{{ node.icon or "" }}</span><span class="nav-label">{{ node.title }}</span>
        </button>
      {% endif %}
    </div>
    {% if node.children %}
    <div class="nav-group-children"{% if not is_active_branch %} hidden{% endif %}>
      {{ render_nav(node.children, nav_id ~ "-") }}
    </div>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endmacro %}

{% block content %}
<div class="page-layout{% if not page.headings %} page-layout-no-toc{% endif %}">
  <nav class="sidebar" id="sidebar-nav" aria-label="section navigation">
    {{ render_nav(nav_tree) }}
  </nav>
  <script>
    (function () {
      try {
        var toggles = document.querySelectorAll('#sidebar-nav [data-nav-id]');
        for (var i = 0; i < toggles.length; i++) {
          var toggle = toggles[i];
          var stored = localStorage.getItem('mdzero-nav-open:' + toggle.dataset.navId);
          if (stored === null) continue;
          var open = stored === '1';
          toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
          var li = toggle.closest('li');
          var children = li && li.querySelector('.nav-group-children');
          if (children) children.hidden = !open;
        }
      } catch (e) {}
    })();
  </script>

  <article class="content">
    {% if breadcrumbs %}
    <nav class="breadcrumbs" aria-label="breadcrumb">
      {% for crumb in breadcrumbs %}
        {% if crumb.route and not loop.last %}<a href="{{ crumb.route }}">{{ crumb.title }}</a>{% else %}<span>{{ crumb.title }}</span>{% endif %}{% if not loop.last %}<span class="breadcrumb-sep" aria-hidden="true">/</span>{% endif %}
      {% endfor %}
    </nav>
    {% endif %}

    {% if is_draft %}
    <div class="draft-banner" data-testid="draft-banner">
      Draft: this page is not published. It is only visible because the site is running in dev mode.
    </div>
    {% endif %}

    <div class="page-title-row">
      {# `page.title` is "" when a page has no
         `title:` frontmatter -- mirror `mdzero/content/navigation.py`'s
         `_display_title` fallback order (title -> first heading ->
         filename stem) here rather than leaving an empty <h1>, so the page
         heading always matches what the sidebar nav entry shows for the
         same page. (This fallback chain is computed once,
         as `page_title`, near the top of this template -- see the comment
         above `{% block head %}` -- and reused here rather than duplicated,
         so `og:title` can never diverge from the visible `<h1>`.) #}
      <h1>{{ page_title }}</h1>
    </div>

    <div class="page-content" id="page-content">
      {{ page.html | safe }}
    </div>

    <nav class="prev-next" aria-label="pagination">
      {% if prev_page %}<a href="{{ prev_page.route }}" rel="prev" class="prev-link"><span class="prev-next-label">Previous</span><span class="prev-next-title">{{ prev_page.title }}</span></a>{% endif %}
      {% if next_page %}<a href="{{ next_page.route }}" rel="next" class="next-link"><span class="prev-next-label">Next</span><span class="prev-next-title">{{ next_page.title }}</span></a>{% endif %}
    </nav>
  </article>

  {% if page.headings %}
  <!--
    "On this page" lives in its own sticky right-hand rail
    (`.toc-rail`), a real third grid column alongside `.sidebar` and
    `.content` on wide viewports.
    `toc-scrollspy.js` and its `#page-toc` id/selectors are untouched --
    only the surrounding wrapper moved. Below the 1200px breakpoint the
    rail is hidden entirely (see `mdzero.css`'s responsive section) rather
    than turned into an off-canvas disclosure: the mobile sidebar drawer
    already covers primary navigation on small screens, and a second
    off-canvas/disclosure widget just for the TOC would duplicate that
    interaction pattern for comparatively little benefit.
  -->
  <aside class="toc-rail">
    <nav class="toc" id="page-toc" aria-label="table of contents">
      <p class="toc-heading">On this page</p>
      <ul>
        {% for heading in page.headings %}
        <li class="toc-level-{{ heading.level }}"><a href="#{{ heading.slug }}">{{ heading.text }}</a></li>
        {% endfor %}
      </ul>
    </nav>
  </aside>
  {% endif %}
</div>
{% endblock %}