{% extends "base.html" %}
{% block title %}The Apps: roro9stack{% endblock %}
{% block description %}{{ page.description }}{% endblock %}
{% block main %}
{% set apps = load_data(path="data/apps.toml", format="toml") %}
<div class="wrap page">
  <header>
    <span class="eyebrow">What's inside</span>
    <h1>{{ page.title }}</h1>
    <p class="lead">{{ page.description }} On the device, the Launcher shows them as a grid of icons; <kbd>Fn</kbd> + <kbd>h</kbd> lists the keys of any screen.</p>
  </header>

  <div class="apps">
    {% for a in apps.app %}
    <article class="app n-lg{% if a.planned %} planned{% endif %}" id="{{ a.tag | slugify }}">
      <div class="app-text">
        <div class="card-top"><div class="ic i{{ a.icon }}" aria-hidden="true"></div><span class="tag">{{ a.tag }}</span></div>
        <h2>{% if a.guide %}<a href="{{ a.guide }}">{{ a.title }}</a>{% else %}{{ a.title }}{% endif %}</h2>
        <p>{{ a.text }}</p>
        <span class="fact">{{ a.fact }}</span>
        {% if a.guide %}<a class="accent-link app-guide" href="{{ a.guide }}">Its page in the guide →</a>{% endif %}
      </div>
      {% if a.screen %}
      <figure class="app-shot">
        <img src="/screens/{{ a.screen | safe }}" width="480" height="270" alt="{{ a.alt }}" loading="lazy">
      </figure>
      {% endif %}
    </article>
    {% endfor %}
  </div>
</div>
{% endblock main %}