{% extends "base.html" %}
{% block title %}{% set parent_path = page.ancestors | last %}{% set parent = get_section(path=parent_path) %}{{ page.title }}: roro9stack {% if parent_path == "_index.md" %}FAQ{% else %}{{ parent.title | lower }}{% endif %}{% endblock %}
{% block description %}{{ page.description }}{% endblock %}
{% block main %}
{% set parent_path = page.ancestors | last %}
{% set parent = get_section(path=parent_path) %}
{% set screens = load_data(path="data/screens.toml", format="toml") %}
<div class="wrap page">
  <header>
    <span class="eyebrow">{% if parent_path != "_index.md" %}<a href="{{ parent.permalink }}">{{ parent.title }}</a>{% else %}FAQ{% endif %}{% if page.extra.tag %} · {{ page.extra.tag }}{% endif %}</span>
    <h1>{{ page.title }}</h1>
    <p class="lead">{{ page.description }}</p>
  </header>

  {% if page.extra.screens %}
  <div class="shots">
    {% for s in screens.screen %}{% if s.file in page.extra.screens %}
    <figure class="shot n-md">
      <img src="/screens/{{ s.file }}" width="480" height="270" alt="{{ s.alt }}" loading="lazy">
      <figcaption>{{ s.caption }}</figcaption>
    </figure>
    {% endif %}{% endfor %}
  </div>
  {% endif %}

  {% if page.extra.toc %}
  <nav class="prose toc" aria-label="Questions">
    <ul>{% for h in page.toc %}<li><a class="accent-link" href="{{ h.permalink }}">{{ h.title }}</a></li>{% endfor %}</ul>
  </nav>
  {% endif %}

  <div class="prose">{{ page.content | safe }}</div>

  {% if page.lower or page.higher %}
  <nav class="pager" aria-label="{{ parent.title }}">
    {% if page.lower %}<a class="accent-link" href="{{ page.lower.permalink }}">← {{ page.lower.title }}</a>{% else %}<span></span>{% endif %}
    {% if page.higher %}<a class="accent-link" href="{{ page.higher.permalink }}">{{ page.higher.title }} →</a>{% endif %}
  </nav>
  {% endif %}
</div>
{% endblock main %}