{% extends 'base.html' %}

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

{% block content %}
    {% set section = get_section(path="documentation/_index.md") %}
    <section id="documentation-section" class="section overflow-x-hidden">
        <div class="grid grid-cols-1 xl:grid-cols-5">
            {% include "partials/doc/global_toc.html" %}
            <div class="col-span-full xl:col-span-3" style="min-height:85vh;">
                <article class="box my-12 px-6 lg:px-8 xl:px-12">
                    <div class="flex flex-col bg-gray-100 rounded-r shadow-sm w-full xl:w-max">
                        <div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative">
                            <h1 class="title leading-10 text-xl lg:text-2xl xl:text-3xl text-garage-orange font-semibold">
                                {{ page.title }}
                            </h1>
                            {% if page.description %}
                                <p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p>
                            {% endif %}
                            {% if page.reading_time %}
                                <p
                                    class="subtitle flex items-center space-x-1 my-2 text-gray-600 italic text-sm"
                                    title="{{ page.reading_time }} min reading time">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    <span>{{ page.reading_time }} min</span>
                                </p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="page-content max-w-4xl">
                        {{ page.content | safe }}
                    </div>
                </article>
            </div>
            {% include "partials/doc/page_toc.html" %}
        </div>
        <div class="2xl:hidden">
            {% if page.earlier or page.later or page.lighter or page.heavier %}
                {% include "partials/doc/pagination.html" %}
            {% endif %}
        </div>
    </section>
{% endblock %}

{% block custom_js %}
    {% if page.toc %}
        {% include "partials/doc/toc_script.html" %}
    {% endif %}
{% endblock %}