<!DOCTYPE html>
{% if section is defined %}
{% set currentTitle =  section.title %}
{% set currentToc = section.toc %}
{% set relative_path = section.relative_path %}
{% endif %}
{%if page is defined %}
{% set currentTitle = page.title %}
{% set currentToc = page.toc %}
{% set relative_path = page.relative_path %}
{% endif %}

<html lang="en">
    <head>
        {% include "parts/meta.html" %}

        <title>{% block title %}{% endblock title %}</title>
        <link rel="stylesheet" href="/styles.css">

        {% include "parts/search-head.html" %}

        <script type="application/javascript" src="/js/light-switch.js"></script>

        <link id="syntax-css" rel="stylesheet" href="">
    </head>
    <body class="h-full dark:bg-stone-900 bg-white text-stone-600 dark:text-stone-300 antialiased">

        {% include "parts/topnav.html" %}

        <div id="docs-main"
             class="mt-12 flex md:flex-row flex-col w-full h-screen-12 sm:overflow-y-hidden"
        >

            {% block sidebar %}
            <div id="sidebar"
                 class ="mx-1 flex flex-col sm:flex-none w-full md:w-72 min-h-max overflow-none sm:overflow-y-auto transition-opacity transition-duration-200 "
            >

                {% block sidebarItems %}{% endblock sidebarItems %}

            </div>
            {% endblock sidebar %}

            <div id="content"
                 class=" w-full px-2 overflow-none sm:overflow-y-auto scrollbar-main scrollbar-thin flex flex-col lg:flex-row justify-center"
            >
                <div class="content max-w-screen-md flex flex-col">
                    <div class="flex-grow">
                        {% block mainContent %}{% endblock mainContent %}
                    </div>

                    {% include "parts/footer.html" %}
                </div>

                {% block rightToc %}
                <div class="hidden pl-2 text-sm font-light mt-2 flex-col w-48 sticky top-4 {% if currentToc | length == 0 %} hidden {% else %} lg:flex {% endif %}">

                    {% for header in currentToc %}
                    <div>
                        <i class="fa fa-hashtag mr-1"></i>
                        <a href="{{ header.permalink }}" class="hover:text-stone-900 dark:hover:text-stone-100">
                            {{ header.title }}
                        </a>
                        {% if header.children | length > 0 %}
                        <div class="pl-4 opacity-75">
                            {% for subhead in header.children %}
                            <div class="border-l-2 dark:border-stone-700 pl-1">
                                <a href="{{ subhead.permalink }}" class="hover:text-stone-900 dark:hover:text-stone-100">
                                    {{ subhead.title }}
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>

                    {% endfor %}
                </div>
                {% endblock rightToc %}
            </div>
        </div>
        {% include "parts/search-part.html" %}
        {% include "parts/fathom.html" %}
    </body>

</html>
