{% extends "base.html" %}
{% block title %}{{ page.title }} · Guide · {{ app_name }}{% endblock %}
{% block body %}
<div class="guide">
  <aside class="guide-nav">
    <div class="guide-search">
      <input type="search" id="guide-q" placeholder="Search the guide…" autocomplete="off" aria-label="Search the guide">
      <ul id="guide-results" class="guide-results" hidden></ul>
    </div>
    <nav aria-label="Guide">
    {% for sname, spages in sections %}
      <h4>{{ sname }}</h4>
      <ul>
      {% for p in spages %}
        <li><a href="/guide/{{ p.slug }}" class="{{ 'on' if p.slug == page.slug else '' }}">{{ p.title }}</a></li>
      {% endfor %}
      </ul>
    {% endfor %}
    </nav>
  </aside>

  <article class="guide-body card">
    <p class="crumb"><a href="/guide">Guide</a> › {{ page.section }}</p>
    <h1>{{ page.title }}</h1>
    {% if page.summary %}<p class="lede">{{ page.summary }}</p>{% endif %}
    {{ page.html | safe }}
    <nav class="guide-pager">
      {% if prev %}<a href="/guide/{{ prev.slug }}">← {{ prev.title }}</a>{% else %}<span></span>{% endif %}
      {% if next %}<a href="/guide/{{ next.slug }}">{{ next.title }} →</a>{% else %}<span></span>{% endif %}
    </nav>
    <p class="hint guide-foot">This page is <code>docs/{{ page.slug }}.md</code> in the repo. Spotted a mistake? <a href="/guide/contributing">Tell us how to report it →</a></p>
  </article>

  {% if page.toc %}
  <aside class="guide-toc">
    <h4>On this page</h4>
    {{ page.toc | safe }}
  </aside>
  {% endif %}
</div>
{% endblock %}
{% block scripts %}<script src="/static/guide.js"></script>{% endblock %}