{% extends 'base.html' %}
{% block head %}
{{ super() }}
<style>
    .tab {margin-left: 2rem;}
</style>
{% endblock head %}
{% block body %}
{{ super() }}
    <div class="level" style="margin-top: 3rem; justify-content: center;">
        <h1 class="title">The Office Quotes</h1>
        <br>
        <h6 class="subtitle is-6" style="padding-top: 2rem;">Source for all The Office Quotes</h6>
    </div>
    <div class="columns is-centered">
        <div class="column is-4"></div>
        {# Site Directory #}
        <div class="column is-narrow">
            <div class="box">
                {# List of Seasons/Episodes #}
                {% for season in seasons %}
                    <u><b><a href="{{ url_for("viewSeason", season=season.id) }}" >Season {{ season.id }}</a></b><br></u>
                    {% for episode in season.episodes %}
                        <a class="tab" href="{{ url_for("viewEpisode", season=season.id, episode=episode.number) }}" >  e{{ episode.number }} - <em>{{ episode.title }}</em></a><br>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
        {# Main Body of Content #}
        <div class="column is-6">
            <div class="box">
                {% block content %}
                {% endblock content%}
            </div>
        </div>
        <div class="column is-3"></div>
    </div>
{% endblock body %}