index.html

<!-- prettier-ignore -->
{% extends "base.html" %}

<!-- prettier-ignore -->
{% block content %}
<main class="centered-section index-list">
    <!-- prettier-ignore -->
    {% for era in eras %}
    <h2 class="index-era">{{era.name}}</h2>
    <ol>
        {% for season in era.seasons %}
        <li class="index-choice
            {% match season.election_offset %}
            {% when Some with (election_offset) %}
            {% when None %}
            no-election
            {% endmatch %}">
            <a href="/season/{{season.index}}" class="index-season-identifier">
                <h3 class="index-season-header">Season {{season.index}}</h3>
                <span class="index-season-dates">{{season.start_date}} - {{season.end_date}}</span>
                <span class="index-season-view">View Idols</span>
            </a>
            <!-- prettier-ignore -->
            {% match season.election_offset %}
            {% when Some with (election_offset) %}
            <span class="index-season-separator">|</span>
            <a
                href="/season/{{season.index}}#{{election_offset}}"
                class="index-season-election"
                >View Election</a
            >
            <!-- prettier-ignore -->
            {% when None %}
            {% endmatch %}
        </li>
        {% endfor %}
    </ol>
    {% endfor %}
</main>
{% endblock %}