{% extends "base.html" %}
{% block title %}{{ page.title }}: roro9stack user guide{% endblock %}
{% block description %}{{ page.description }}{% endblock %}
{% block main %}
{% set screens = load_data(path="data/screens.toml", format="toml") %}
<div class="wrap page">
  <header>
    <span class="eyebrow"><a href="/guide/">User guide</a>{% 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 %}

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

  <nav class="pager" aria-label="User guide">
    {% 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>
</div>
{% endblock main %}