<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="paged.js/paged.polyfill.js"></script>
    <link href="paged.js/pagedjs.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="print_style.css">
</head>
<body>
    <div id="contenteo">
        <section class="section" id="start-matter"></section>
        {{ content[0] }}
    </section>
    <section class="toc">
        <h3>Contents</h3>
        <ul>
            {% for title in titles %}
            {% if loop.index > 1 %}
            <li class="toc-title"><a href="#section-{{ loop.index + 1 }}">{{ title }}</a></li>
            {% if (loop.index == 2) or (loop.index == 18) or (loop.index == 22) %}
            <br>
            {% endif %}
            {% endif %}
            {% endfor %}
        </ul>
    </section>
    {% for section in content %}
    {% if loop.index > 1 %}
    <!-- <section class="header-page" id="{{ titles[loop.index] }}">
        <h1>{{ titles[loop.index - 1] }}</h1>
    </section> -->
    <section id="section-{{ loop.index + 1 }}" class="section">
        {{ section }}
    </section>
    {% endif %}
    {% endfor %}
</div>
</div>
</body>
</html>