{% extends "index.html" %}

{% block hero %}
{% endblock hero %}

{% block content %}
    <div class="container">
        <nav class="docs__sidebar">
            <ul>
                {% for h1 in toc %}
                    {% set index = loop.index %}
                    <li>
                        <a href="{{ h1.permalink }}">{{ h1.title }}</a>
                        {% if h1.children %}
                            <ul>
                                {% for h2 in h1.children %}
                                    {% set index2 = loop.index %}
                                    <li>
                                        <a href="{{ h2.permalink }}">{{ h2.title }}</a>
                                        {% if h2.children %}
                                            <input aria-hidden="true" class="submenu-open" type="checkbox" id="docs-{{ index }}-{{ index2 }}-open"/><label aria-hidden="true" for="docs-{{ index }}-{{ index2 }}-open"></label>
                                            <ul>
                                                {% for h3 in h2.children %}<li><a href="{{ h3.permalink }}">{{ h3.title }}</a></li>{% endfor %}
                                            </ul>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>

        </nav>
        <main class="docs__content">
            {% block doc_content %}
                {{ section.content | safe }}
            {% endblock doc_content %}
        </main>
    </div>
{% endblock content %}