{% extends "base.html" %}

{% block title %}{{ page.title }} - Hazelnut{% endblock title %}

{% block content %}

<h1 class="post-title">{{ page.title }}</h1>
<p class="post-date">{{ page.date | date() }}</p>

{% if page.extra.toc %}
<h1>Table of Contents <span id="toc-toggle">[-]</span></h1>
<div id="toc">
<ul>
{% for h1 in page.toc %}
    <li>
        <a class="internal" href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
        {% if h1.children %}
            <ul>
                {% for h2 in h1.children %}
                    <li>
                        <a class="internal" href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endfor %}
</ul>
</div>
<script>
 var shown = false;
 var toggle = document.getElementById("toc-toggle");
 var toc = document.getElementById("toc");

 function update() {
     if (shown) {
         toc.style.display = "block";
         toggle.innerHTML = "[-]";
     } else {
         toc.style.display = "none";
         toggle.innerHTML = "[+]";
     }
 }
 
 toggle.parentNode.addEventListener("click", function() {
     shown = !shown;
     update();
 });

 update();
</script>
{% endif %}

{{ page.content | safe }}

{% endblock content %}