<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
    <head>
        {% include head.html %}
    </head>
    <body class="min-h-screen bg-slate-50 text-slate-800 font-sans leading-relaxed" data-controller="anchor clipboard navigation tryit {{ page.data-controller }}">
        {% include size-helper.html %}
        {% include banner.html %}
        {% include header.html %}


        <div class="container max-w-7xl mx-auto px-4 lg:px-6 py-8">
            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Sidebar Navigation -->
                <aside class="lg:w-64 shrink-0">
                    {% include sidebar.html %}
                </aside>

                <!-- Main Content -->
                <main class="flex-1 min-w-0">
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="prose prose-slate max-w-none">
                            {% include github-cta.html %}
                            {{ content }}
                        </div>

                        {% include pagination.html %}
                    </div>
                </main>

                <!-- Table of Contents -->
                <aside class="hidden xl:block w-56 shrink-0" id="anchor-navigation">
                    <div class="sticky top-8">
                        <h4 class="text-sm font-semibold text-indigo-600 uppercase tracking-wider mb-4">
                            <i class="fa-duotone fa-list-tree"></i> On This Page
                        </h4>
                        <nav class="toc">
                            <ul class="list-none space-y-2 text-sm"></ul>
                        </nav>
                    </div>
                </aside>
            </div>
        </div>

        {% include footer.html %}
        {% include scripts.html %}
    </body>
</html>
