{% extends "_base.html" %}
{#
    Template: article.html
    Description: Article avec sidebar et table des matieres (methodologie, publications)
    Variables:
        - title: Titre de l'article
        - subtitle: Sous-titre optionnel
        - author: Auteur de l'article
        - date: Date de publication
        - toc: Table des matieres (generee automatiquement si non fournie)
        - page_content_html: Contenu markdown converti en HTML
        - related_links: Liens connexes [{title, url}]
#}

{% block title %}{{ title | default('Article') }} - {{ site.title | default('Niamoto') }}{% endblock %}

{% block styles %}
<style>
    .toc-link {
        display: block;
        padding: 0.5rem 0;
        color: #6b7280;
        text-decoration: none;
        border-left: 2px solid transparent;
        padding-left: 1rem;
        transition: all 0.2s;
    }
    .toc-link:hover, .toc-link.active {
        color: #059669;
        border-left-color: #059669;
        background-color: #f0fdf4;
    }
    .toc-link-h3 {
        padding-left: 2rem;
        font-size: 0.875rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="article-page py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Sidebar TOC -->
            <aside class="lg:w-64 lg:flex-shrink-0">
                <div class="lg:sticky lg:top-24">
                    <nav class="bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">
                            Table des matieres
                        </h2>
                        <div id="toc-container" class="space-y-1">
                            <!-- TOC will be generated by JavaScript -->
                        </div>
                    </nav>

                    {% if related_links %}
                    <div class="mt-6 bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">
                            Voir aussi
                        </h2>
                        <ul class="space-y-2">
                            {% for link in related_links %}
                            <li>
                                <a href="{{ link.url | relative_url(nav_depth|default(depth|default(0))) }}"
                                   class="text-green-600 hover:text-green-800 text-sm">
                                    {{ link.title }}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </aside>

            <!-- Main Content -->
            <main class="flex-1 min-w-0">
                <article class="bg-white rounded-lg shadow-md p-8 lg:p-12">
                    <!-- Article Header -->
                    <header class="mb-8 pb-8 border-b border-gray-200">
                        <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">{{ title }}</h1>
                        {% if subtitle %}
                        <p class="text-xl text-gray-600 mb-4">{{ subtitle }}</p>
                        {% endif %}
                        <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                            {% if author %}
                            <span class="flex items-center">
                                <i class="fas fa-user mr-2"></i>{{ author }}
                            </span>
                            {% endif %}
                            {% if date %}
                            <span class="flex items-center">
                                <i class="fas fa-calendar mr-2"></i>{{ date }}
                            </span>
                            {% endif %}
                        </div>
                    </header>

                    <!-- Article Body -->
                    {% if page_content_html %}
                    <div id="article-content" class="markdown-content">
                        {{ page_content_html | safe }}
                    </div>
                    {% else %}
                    <p class="text-gray-500 italic text-center py-8">
                        (Aucun contenu disponible pour cet article)
                    </p>
                    {% endif %}
                </article>

                <!-- Navigation -->
                <div class="mt-8 flex justify-between items-center">
                    <a href="{{ 'index.html' | relative_url(nav_depth|default(depth|default(0))) }}"
                       class="inline-flex items-center text-green-600 hover:text-green-800 transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Retour a l'accueil
                    </a>
                </div>
            </main>
        </div>
    </div>
</div>

<style>
    .markdown-content h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1f2937;
        margin-top: 3rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e5e7eb;
    }
    .markdown-content h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #374151;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
    }
    .markdown-content h4 {
        font-size: 1.125rem;
        font-weight: 600;
        color: #4b5563;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }
    .markdown-content p {
        color: #4b5563;
        margin-bottom: 1rem;
        line-height: 1.8;
    }
    .markdown-content ul, .markdown-content ol {
        margin-bottom: 1rem;
        margin-left: 1.5rem;
        color: #4b5563;
    }
    .markdown-content ul { list-style-type: disc; }
    .markdown-content ol { list-style-type: decimal; }
    .markdown-content li { margin-bottom: 0.5rem; line-height: 1.7; }
    .markdown-content blockquote {
        border-left: 4px solid #10b981;
        padding: 1rem 1.5rem;
        margin: 1.5rem 0;
        background-color: #f0fdf4;
        border-radius: 0 0.5rem 0.5rem 0;
    }
    .markdown-content blockquote p { margin-bottom: 0; color: #065f46; }
    .markdown-content code {
        background-color: #f3f4f6;
        padding: 0.2rem 0.4rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
    }
    .markdown-content pre {
        background-color: #1f2937;
        color: #e5e7eb;
        padding: 1.5rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin: 1.5rem 0;
    }
    .markdown-content a { color: #059669; text-decoration: underline; }
    .markdown-content a:hover { color: #047857; }
    .markdown-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
        margin: 1.5rem 0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    .markdown-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
        font-size: 0.9rem;
    }
    .markdown-content th, .markdown-content td {
        border: 1px solid #e5e7eb;
        padding: 0.75rem;
        text-align: left;
    }
    .markdown-content th {
        background-color: #f9fafb;
        font-weight: 600;
    }
</style>
{% endblock %}

{% block extra_scripts %}
<script>
    // Generate TOC from headings
    document.addEventListener('DOMContentLoaded', function() {
        const content = document.getElementById('article-content');
        const tocContainer = document.getElementById('toc-container');

        if (!content || !tocContainer) return;

        const headings = content.querySelectorAll('h2, h3');
        if (headings.length === 0) {
            tocContainer.innerHTML = '<p class="text-sm text-gray-400 italic">Pas de sections</p>';
            return;
        }

        headings.forEach((heading, index) => {
            // Add ID if not present
            if (!heading.id) {
                heading.id = 'section-' + index;
            }

            // Create TOC link
            const link = document.createElement('a');
            link.href = '#' + heading.id;
            link.textContent = heading.textContent;
            link.className = 'toc-link' + (heading.tagName === 'H3' ? ' toc-link-h3' : '');
            tocContainer.appendChild(link);
        });

        // Highlight active section on scroll
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                const id = entry.target.id;
                const tocLink = tocContainer.querySelector(`a[href="#${id}"]`);
                if (tocLink) {
                    if (entry.isIntersecting) {
                        tocContainer.querySelectorAll('.toc-link').forEach(l => l.classList.remove('active'));
                        tocLink.classList.add('active');
                    }
                }
            });
        }, { rootMargin: '-100px 0px -80% 0px' });

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