{% extends "base.html" %}

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

{% block content %}
<article class="doc-page">
    <div class="container">
        {% if page.components and page.components is containing("docs") %}
        <div class="doc-layout">
            <aside class="doc-sidebar">
                <nav class="doc-nav">
                    <h3>Documentation</h3>
                    {% set docs_section = get_section(path="docs/_index.md") %}
                    <ul>
                        {% for p in docs_section.pages %}
                        <li>
                            <a href="{{ p.permalink }}" {% if p.permalink == page.permalink %}class="active"{% endif %}>
                                {{ p.title }}
                            </a>
                        </li>
                        {% endfor %}
                        {% for subsection in docs_section.subsections %}
                        {% set sub = get_section(path=subsection) %}
                        <li class="nav-section">
                            <a href="{{ sub.permalink }}" class="nav-section-title">
                                {{ sub.title }}
                            </a>
                            <ul>
                                {% for p in sub.pages %}
                                <li>
                                    <a href="{{ p.permalink }}" {% if p.permalink == page.permalink %}class="active"{% endif %}>
                                        {{ p.title }}
                                    </a>
                                </li>
                                {% endfor %}
                                {% for subsub in sub.subsections %}
                                {% set subsub_s = get_section(path=subsub) %}
                                <li class="nav-subsection">
                                    <a href="{{ subsub_s.permalink }}" class="nav-subsection-title">
                                        {{ subsub_s.title }}
                                    </a>
                                    <ul>
                                        {% for p in subsub_s.pages %}
                                        <li>
                                            <a href="{{ p.permalink }}" {% if p.permalink == page.permalink %}class="active"{% endif %}>
                                                {{ p.title }}
                                            </a>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>
                        {% endfor %}
                    </ul>
                </nav>
            </aside>

            <div class="doc-main">
                <h1>{{ page.title }}</h1>
                {% if page.description %}
                <p class="lead">{{ page.description }}</p>
                {% endif %}

                <div class="doc-content">
                    {{ page.content | safe }}
                </div>
            </div>
        </div>
        {% else %}
        <h1>{{ page.title }}</h1>
        {% if page.description %}
        <p class="lead">{{ page.description }}</p>
        {% endif %}

        <div class="doc-content">
            {{ page.content | safe }}
        </div>
        {% endif %}
    </div>
</article>
{% endblock %}