{% extends "layout.html" %}

{% block title %}{{ title }}{% endblock %}

{% block style %}
<link rel="stylesheet" href="{{ staticBase }}/print.css">
{% endblock %}


{% macro articleContent(content) %}
    {% for section in content %}
        {% if section.type == "normal" %}
            {% autoescape false %}{{ section.content }}{% endautoescape %}
        {% elif section.type == "exercise" %}
            <div class="exercise">
                <div class="exercise-header">Exercise #{{ exercise }}</div>
                {% autoescape false %}{{ section.content }}{% endautoescape %}
                <pre><code>{% autoescape false %}{{ section.code.base|code }}{% endautoescape %}</code></pre>
                {% set exercise = exercise + 1 %}
            </div>
        {% elif section.type == "quiz" %}
        <div class="quiz">
          <div class="exercise-header">Exercise #{{ exercise }}</div>
          {% autoescape false %}{{ section.content }}{% endautoescape %}
          {% autoescape false %}{{ section.quiz.base }}{% endautoescape %}
          {% set exercise = exercise + 1 %}
        </div>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% set exercise = 1 %}
{% block content %}
    {# Cover #}
    <section id="cover">
        <h1>{{ title }}</h1>
        {% if githubId %}
        <h2>By <a href="{{ githubHost }}{{ githubAuthor }}">@{{ githubAuthor }}</a></h2>
        {% endif %}
    </section>

    {# Summary #}
    <section id="summary">
        <h1>Table of Contents</h1>
        <ol>
            <li>
                <a href="#README.md">
                    <h2>Introduction</h2>
                </a>
            </li>
            {% for item in summary.chapters %}
                <li>
                    <h2><span>{{ item.level }}.</span> <a href="#{{ item.path }}">{{ item.title }}</a></h2>
                    {% if item.articles.length > 0 %}
                    <ol>
                        {% for article in item.articles %}
                            <li>
                                <span>{{ article.level }}</span> <a href="#{{ article.path }}">{{ article.title }}</a>
                            </li>
                        {% endfor %}
                    </ol>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    </section>

    {# Pages content #}
    <section>
        <article id="README.md">
        {{ articleContent(pages["README.md"].content) }}
        </article>
    </section>
    {% for item in summary.chapters %}
        <section>
            <article id="{{ item.path }}" class="new-chapter">
                <h1>{{ item.title }}</h1>
            </article>

            {% if pages[item.path] %}
            <article>
            {{ articleContent(pages[item.path].content) }}
            </article>
            {% endif %}

            {% if item.articles.length > 0 %}
                {% for article in item.articles %}
                    {% if pages[article.path] %}
                        <article id="{{ article.path }}">
                            {{ articleContent(pages[article.path].content) }}
                        </article>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </section>
    {% endfor %}


    {# Exercise solutions #}
    {% if exercise > 1 %}
        {% set exercise = 1 %}
        <section>
            <article class="new-chapter">
                <h1>Exercise Solutions</h1>
            </article>
            <article>
            {% for item in summary.chapters %}
                {% for article in item.articles %}
                    {% if pages[article.path] %}
                        {% for section in pages[article.path].content %}
                            {% if section.type == "exercise" %}
                                <div class="exercise">
                                    <div class="exercise-header">Exercise #{{ exercise }}</div>
                                    {% autoescape false %}{{ section.content }}{% endautoescape %}
                                    <pre><code>{% autoescape false %}{{ section.code.solution|code }}{% endautoescape %}</code></pre>
                                    {% set exercise = exercise + 1 %}
                                </div>
                            {% elif section.type == "quiz" %}
                                <div class="quiz">
                                    <div class="exercise-header">Exercise #{{ exercise }}</div>
                                    {% autoescape false %}{{ section.content }}{% endautoescape %}
                                    {% autoescape false %}{{ section.quiz.solution }}{% endautoescape %}
                                    {% set exercise = exercise + 1 %}
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
            </article>
        </section>
    {% endif %}
{% endblock %}

{% block javascript %}{% endblock %}