{% extends "base.html" %}
{% from "components/callouts.html" import info, warning, tip %}

{% block title %}{{ page.title }} - SmartTools Docs{% endblock %}

{% block meta_description %}{{ page.description or page.title }}{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="lg:grid lg:grid-cols-12 lg:gap-8">
            <!-- Left Sidebar - TOC -->
            <aside class="hidden lg:block lg:col-span-3">
                <nav class="sticky top-4 bg-white rounded-lg border border-gray-200 p-4 max-h-[calc(100vh-6rem)] overflow-y-auto">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4">Documentation</h3>

                    <ul class="space-y-1">
                        {% for section in toc %}
                        <li>
                            <a href="{{ url_for('web.docs', path=section.slug) }}"
                               class="block px-3 py-2 text-sm rounded-md {{ 'bg-indigo-50 text-indigo-700 font-medium' if current_path == section.slug else 'text-gray-600 hover:bg-gray-50' }}">
                                {{ section.title }}
                            </a>

                            {% if section.children %}
                            <ul class="ml-4 mt-1 space-y-1">
                                {% for child in section.children %}
                                <li>
                                    <a href="{{ url_for('web.docs', path=child.slug) }}"
                                       class="block px-3 py-1.5 text-sm rounded-md {{ 'bg-indigo-50 text-indigo-700 font-medium' if current_path == child.slug else 'text-gray-500 hover:text-gray-700 hover:bg-gray-50' }}">
                                        {{ child.title }}
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </nav>
            </aside>

            <!-- Main Content -->
            <main class="lg:col-span-6">
                <!-- Mobile TOC Toggle -->
                <div class="lg:hidden mb-6">
                    <button type="button"
                            onclick="toggleMobileToc()"
                            class="w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-lg">
                        <span class="font-medium text-gray-700">On this page</span>
                        <svg id="toc-chevron" class="w-5 h-5 text-gray-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>

                    <nav id="mobile-toc" class="hidden mt-2 bg-white border border-gray-200 rounded-lg p-4">
                        <ul class="space-y-2">
                            {% for section in toc %}
                            <li>
                                <a href="{{ url_for('web.docs', path=section.slug) }}"
                                   class="block text-sm {{ 'text-indigo-600 font-medium' if current_path == section.slug else 'text-gray-600' }}">
                                    {{ section.title }}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>

                <!-- Breadcrumb -->
                <nav class="mb-6 text-sm text-gray-500" aria-label="Breadcrumb">
                    <ol class="flex items-center space-x-2">
                        <li><a href="{{ url_for('web.docs', path='') }}" class="hover:text-gray-700">Docs</a></li>
                        {% if page.parent %}
                        <li class="flex items-center">
                            <svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <a href="{{ url_for('web.docs', path=page.parent.slug) }}" class="hover:text-gray-700">{{ page.parent.title }}</a>
                        </li>
                        {% endif %}
                        <li class="flex items-center">
                            <svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span class="text-gray-900 font-medium">{{ page.title }}</span>
                        </li>
                    </ol>
                </nav>

                <!-- Article Content -->
                <article class="bg-white rounded-lg border border-gray-200 p-8">
                    <h1 class="text-3xl font-bold text-gray-900 mb-6">{{ page.title }}</h1>

                    <div class="prose prose-lg prose-indigo max-w-none">
                        {{ page.content_html|safe }}
                    </div>

                    <!-- Page Navigation -->
                    <div class="mt-12 pt-8 border-t border-gray-200 flex items-center justify-between">
                        {% if prev_page %}
                        <a href="{{ url_for('web.docs', path=prev_page.slug) }}"
                           class="flex items-center text-indigo-600 hover:text-indigo-800">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                            </svg>
                            {{ prev_page.title }}
                        </a>
                        {% else %}
                        <div></div>
                        {% endif %}

                        {% if next_page %}
                        <a href="{{ url_for('web.docs', path=next_page.slug) }}"
                           class="flex items-center text-indigo-600 hover:text-indigo-800">
                            {{ next_page.title }}
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                        {% endif %}
                    </div>
                </article>

                <!-- Edit on GitHub -->
                <div class="mt-6 text-center">
                    <a href="https://github.com/your-org/smarttools/edit/main/docs/{{ current_path }}.md"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                        </svg>
                        Edit this page on GitHub
                    </a>
                </div>
            </main>

            <!-- Right Sidebar - On This Page + Ads -->
            <aside class="hidden lg:block lg:col-span-3">
                <div class="sticky top-4 space-y-6">
                    <!-- On This Page -->
                    {% if page.headings %}
                    <nav class="bg-white rounded-lg border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">On this page</h3>
                        <ul class="space-y-2 text-sm" id="page-toc">
                            {% for heading in page.headings %}
                            <li class="{{ 'ml-4' if heading.level > 2 else '' }}">
                                <a href="#{{ heading.id }}"
                                   class="text-gray-500 hover:text-gray-900 transition-colors"
                                   data-heading="{{ heading.id }}">
                                    {{ heading.text }}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </nav>
                    {% endif %}

                    <!-- Ad Zone -->
                    {% if show_ads %}
                    <div class="bg-blue-50 rounded-lg border border-blue-100 p-4">
                        <p class="text-xs text-gray-500 mb-2">Advertisement</p>
                        <div id="docs-sidebar-ad" class="min-h-[250px]">
                            <!-- Ad content -->
                        </div>
                    </div>
                    {% endif %}
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
function toggleMobileToc() {
    const toc = document.getElementById('mobile-toc');
    const chevron = document.getElementById('toc-chevron');
    toc.classList.toggle('hidden');
    chevron.classList.toggle('rotate-180');
}

// Scroll spy for page TOC
document.addEventListener('DOMContentLoaded', function() {
    const headings = document.querySelectorAll('article h2, article h3');
    const tocLinks = document.querySelectorAll('#page-toc a');

    if (headings.length === 0 || tocLinks.length === 0) return;

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                tocLinks.forEach(link => {
                    link.classList.remove('text-indigo-600', 'font-medium');
                    link.classList.add('text-gray-500');
                    if (link.dataset.heading === entry.target.id) {
                        link.classList.remove('text-gray-500');
                        link.classList.add('text-indigo-600', 'font-medium');
                    }
                });
            }
        });
    }, {rootMargin: '-100px 0px -66%'});

    headings.forEach(heading => observer.observe(heading));
});
</script>
{% endblock %}