{% extends "base.html" %}
{%- import "macros/icons.html" as icons -%}
{%- import "macros/docs.html" as docs -%}

{% block title %}{{ page.title }} · {{ config.title }}{% endblock title %}
{% block description %}{{ page.description | default(value=config.description) }}{% endblock description %}
{% block body_class %}layout-docs{% endblock body_class %}

{% block menu_button %}
<button class="icon-button menu-button" type="button" data-menu-toggle aria-label="Show the contents" aria-expanded="false">{{ icons::menu() }}</button>
{% endblock menu_button %}

{% block body %}
{%- set group = get_section(path=page.ancestors | last, metadata_only=true) %}
<div class="docs-layout">
  <aside class="sidebar" data-sidebar>
    {{ docs::sidebar(current=page.path) }}
  </aside>
  <main id="main" class="docs-main">
    <article class="prose">
      <header class="page-header">
        <span class="eyebrow">{{ group.extra.number }} — {{ group.title }}</span>
        <h1>{{ page.title }}</h1>
        {%- if page.description %}
        <p class="lead">{{ page.description }}</p>
        {%- endif %}
      </header>
      {{ page.content | safe }}
    </article>
    {{ docs::pager(current=page.path) }}
    <p class="page-source">
      <a href="{{ config.extra.repository }}/src/branch/main/docs/content/{{ page.relative_path }}">{{ icons::file() }} This page's source</a>
    </p>
  </main>
  <aside class="toc-column">
    {{ docs::toc(entries=page.toc) }}
  </aside>
</div>
{% endblock body %}