{% extends 'base.html.twig' %}

{% block title %}Storyline · dmtools{% endblock %}

{% block body %}
    <div class="storyline-index">
        <header class="mb-4">
            <div class="text-uppercase small text-body-secondary fw-semibold" style="letter-spacing:.08em">Storyline</div>
            <h1 class="display-6 mb-2">Brackenford</h1>
            <p class="text-body-secondary mb-0" style="max-width:60ch">
                The campaign bible, split into chapters. The overview lays out the whole arc;
                the prologue is the first session. More chapters — sessions, locations and the
                people of the village — will follow.
            </p>
        </header>

        <ol class="storyline-chapter-list list-unstyled">
            {% for slug, chapter in chapters %}
                <li>
                    <a href="{{ path('app_storyline_chapter', {slug: slug}) }}" class="storyline-chapter-card">
                        <span class="storyline-chapter-num">{{ chapter.tag }}</span>
                        <span class="storyline-chapter-body">
                            <span class="storyline-chapter-kicker">{{ chapter.eyebrow }}</span>
                            <span class="storyline-chapter-title">{{ chapter.title }}</span>
                            <span class="storyline-chapter-summary">{{ chapter.summary }}</span>
                        </span>
                        <span class="storyline-chapter-go" aria-hidden="true">&rarr;</span>
                    </a>
                </li>
            {% endfor %}
        </ol>
    </div>
{% endblock %}