{% extends "base.html" %}

{% block title %}Help - {{ title }}{% endblock %}

{% block head %}
{{ super() }}
<style>
    .prose table {
        width: 100%;
    }
    .prose th {
        background-color: oklch(var(--b2));
    }
    .prose a {
        text-decoration: underline;
    }
    .prose a:hover {
        text-decoration: none;
    }
    .prose code:not(pre > code) {
        font-size: 0.9em;
        padding: 0.2em 0.4em;
        margin: 0;
        border-radius: 6px;
        background-color: oklch(var(--b2));
    }
    .prose pre > code {
        background-color: transparent;
        padding: 0;
    }
    .prose h1 {
        font-size: 1.75rem;
    }
    .prose h2 {
        font-size: 1.375rem;
    }
    .prose h3 {
        font-size: 1.125rem;
    }
</style>
{% endblock %}


{% block content %}
<div class="flex flex-col sm:flex-row gap-8">
    <aside class="w-full sm:w-1/3 md:w-1/4 lg:w-1/s flex-shrink-0">
        <div class="sticky top-20">
            <ul class="menu bg-base-200 rounded-box p-2">
                {% for item in navigation %}
                    {% if item.is_category %}
                        <li>
                            <details open>
                                <summary class="font-semibold text-base-content/70">{{ item.name }}</summary>
                                <ul>
                                    {% for child in item.children %}
                                    <li><a href="{{ url_for('help.help_page', page=child.link) }}" class="{{ 'active' if child.link == current_page else '' }}">{{ child.name }}</a></li>
                                    {% endfor %}
                                </ul>
                            </details>
                        </li>
                    {% else %}
                        <li><a href="{{ url_for('help.help_page', page=item.link) }}" class="{{ 'active' if item.link == current_page else '' }}">{{ item.name }}</a></li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </aside>

    <main class="w-full sm:w-2/3 md:w-3/4 lg:w-4/5">
        <article class="prose max-w-none bg-base-100 p-6 sm:p-8 rounded-box shadow-lg">
            {{ content|safe }}
        </article>
    </main>
</div>
{% endblock %}