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

{% block title %}{{ section.title }} · {{ config.title }}{% endblock title %}
{% block description %}{{ section.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 %}
<div class="docs-layout">
  <aside class="sidebar" data-sidebar>
    {{ docs::sidebar(current=section.path) }}
  </aside>
  <main id="main" class="docs-main">
    <article class="prose">
      <header class="page-header">
        <span class="eyebrow">{% if section.extra.number %}{{ section.extra.number }} — {% endif %}Documentation</span>
        <h1>{{ section.title }}</h1>
        {%- if section.description %}
        <p class="lead">{{ section.description }}</p>
        {%- endif %}
      </header>
      {{ section.content | safe }}
    </article>
    {#- A group lists its pages; the top of the documentation lists the groups. #}
    {%- if section.pages | length > 0 %}
    <div class="cards">
      {%- for p in section.pages %}
      <a class="card" href="{{ p.permalink }}">
        <span class="card-number">{{ section.extra.number }}.{{ loop.index }}</span>
        <span class="card-title">{{ p.title }} {{ icons::arrow_right() }}</span>
        {%- if p.description %}<span class="card-text">{{ p.description }}</span>{% endif %}
      </a>
      {%- endfor %}
    </div>
    {%- else %}
    {%- for sub_path in section.subsections %}
    {%- set sub = get_section(path=sub_path) %}
    <section class="group-overview">
      <h2><span>{{ sub.extra.number }}</span><a href="{{ sub.permalink }}">{{ sub.title }}</a></h2>
      {%- if sub.description %}<p>{{ sub.description }}</p>{% endif %}
      <div class="cards">
        {%- for p in sub.pages %}
        <a class="card" href="{{ p.permalink }}">
          <span class="card-number">{{ sub.extra.number }}.{{ loop.index }}</span>
          <span class="card-title">{{ p.title }} {{ icons::arrow_right() }}</span>
          {%- if p.description %}<span class="card-text">{{ p.description }}</span>{% endif %}
        </a>
        {%- endfor %}
      </div>
    </section>
    {%- endfor %}
    {%- endif %}
  </main>
  <aside class="toc-column"></aside>
</div>
{% endblock body %}