{{ define "content" }}
  <section data-layout="docs">

    <nav aria-label="Documentation" data-nav="sidebar">
      {{- $top := .FirstSection -}}
      {{- range $top.Sections.ByWeight -}}
      <h3>{{ .Title }}</h3>
      <ul>
        {{- range .RegularPages.ByWeight -}}
        <li>
          <a href="{{ .RelPermalink }}"
            {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
            {{- .LinkTitle -}}
          </a>
        </li>
        {{- end -}}
      </ul>
      {{- end -}}
    </nav>

    <article>
      <header>
        <h1>{{ .Title }}</h1>
        {{- with .Description }}
        <p>{{ . }}</p>
        {{- end }}
      </header>

      {{ .Content }}

      {{- if or .PrevInSection .NextInSection -}}
      <footer data-role="prev-next">
        {{- with .NextInSection -}}
        <a href="{{ .RelPermalink }}" rel="prev">
          <span aria-hidden="true">←</span> {{ .LinkTitle }}
        </a>
        {{- end -}}
        {{- with .PrevInSection -}}
        <a href="{{ .RelPermalink }}" rel="next">
          {{ .LinkTitle }} <span aria-hidden="true">→</span>
        </a>
        {{- end -}}
      </footer>
      {{- end -}}
    </article>

    {{- with .TableOfContents -}}
    <aside data-toc>
      <h3>{{ i18n "onThisPage" | default "On this page" }}</h3>
      {{ . }}
    </aside>
    {{- end -}}

  </section>
  <script>
  // TOC scroll spy — highlights current section in the aside
  (function(){
    var toc = document.querySelector('[data-toc]');
    if (!toc) return;
    var links = toc.querySelectorAll('a');
    if (!links.length) return;
    var headings = [];
    links.forEach(function(a) {
      var id = a.getAttribute('href');
      if (id && id.startsWith('#')) {
        var el = document.getElementById(id.slice(1));
        if (el) headings.push({ el: el, link: a });
      }
    });
    if (!headings.length) return;
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          links.forEach(function(a) { a.removeAttribute('aria-current'); });
          headings.forEach(function(h) {
            if (h.el === entry.target) h.link.setAttribute('aria-current', 'true');
          });
        }
      });
    }, { rootMargin: '0px 0px -70% 0px' });
    headings.forEach(function(h) { observer.observe(h.el); });
  })();
  </script>
{{ end }}