{% extends "base.html" %}
{% block content %}
  <div class="maya-container docs-layout">
    <nav class="docs-sidenav" aria-label="Pages">
      <ul>
        {% for item in nav %}
          {% if item.is_page %}
            <li><a href="{{ item.url|url }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.title }}</a></li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
    <article class="docs-content maya-text">
      <div class="maya-page-label">
        <p class="maya-page-label__text">Documentation</p>
        <div class="maya-page-label__bar"></div>
      </div>
      {{ page.content }}
      <div class="docs-pager">
        {% if page.previous_page %}
          <a class="maya-link-tile" href="{{ page.previous_page.url|url }}">
            <span class="maya-link-tile__body"><span class="text-small text-neutral600">Previous</span><span class="maya-link-tile__heading">{{ page.previous_page.title }}</span></span>
          </a>
        {% endif %}
        {% if page.next_page %}
          <a class="maya-link-tile" href="{{ page.next_page.url|url }}">
            <span class="maya-link-tile__body"><span class="text-small text-neutral600">Next</span><span class="maya-link-tile__heading">{{ page.next_page.title }}</span></span>
            <svg class="maya-link-tile__arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        {% endif %}
      </div>
      {% if page.edit_url %}
        <p class="docs-edit"><a href="{{ page.edit_url }}">Edit this page</a></p>
      {% endif %}
    </article>
  </div>
{% endblock %}