{% extends "_base.html" %}
{#
    Template: glossary.html
    Description: Glossaire des termes scientifiques avec navigation alphabetique
    Variables:
        - title: Titre de la page
        - introduction: Texte d'introduction
        - terms: Liste de termes [{term, definition, category, related}]
        - page_content_html: Contenu markdown converti en HTML (alternative)
#}

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

{% block content %}
<div class="glossary-page py-12">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <header class="mb-12">
            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">
                {{ title | default('Glossaire') }}
            </h1>
            <div class="w-20 h-1 bg-green-600 mb-6"></div>
            {% if introduction %}
            <p class="text-lg text-gray-600 max-w-3xl">{{ introduction }}</p>
            {% endif %}
            {% if page_content_html %}
            <div class="mt-6 prose max-w-none text-gray-600">
                {{ page_content_html | safe }}
            </div>
            {% endif %}
        </header>

        <!-- Search -->
        <div class="mb-8">
            <div class="relative max-w-md">
                <input type="text" id="glossary-search" placeholder="Rechercher un terme..."
                       class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>

        <!-- Alphabetical Navigation -->
        <nav class="alphabet-nav mb-8 sticky top-16 bg-gray-50 py-4 z-10">
            <div class="flex flex-wrap justify-center gap-1" id="alphabet-links">
                <!-- Generated by JavaScript -->
            </div>
        </nav>

        <!-- Terms List -->
        <div class="terms-list">
            {% if terms %}
                {% set current_letter = '' %}
                {% for term in terms | sort(attribute='term') %}
                    {% set first_letter = term.term[0] | upper %}
                    {% if first_letter != current_letter %}
                        {% set current_letter = first_letter %}
                        <div class="letter-section mb-8" id="letter-{{ current_letter }}">
                            <h2 class="text-2xl font-bold text-green-700 mb-4 pb-2 border-b-2 border-green-200">
                                {{ current_letter }}
                            </h2>
                        </div>
                    {% endif %}

                    <article class="term-item bg-white rounded-lg shadow-sm border border-gray-100 p-6 mb-4 hover:border-green-200 transition-colors"
                             data-term="{{ term.term | lower }}"
                             data-definition="{{ term.definition | lower }}">
                        <div class="flex items-start gap-4">
                            <div class="flex-1">
                                <h3 class="text-lg font-semibold text-gray-800 mb-2">
                                    {{ term.term }}
                                    {% if term.category %}
                                    <span class="ml-2 text-xs font-normal bg-green-100 text-green-700 px-2 py-1 rounded">
                                        {{ term.category }}
                                    </span>
                                    {% endif %}
                                </h3>
                                <p class="text-gray-600 leading-relaxed">{{ term.definition }}</p>

                                {% if term.related %}
                                <div class="mt-3 pt-3 border-t border-gray-100">
                                    <span class="text-sm text-gray-500">Voir aussi : </span>
                                    {% for rel in term.related %}
                                    <a href="#" class="related-link text-sm text-green-600 hover:text-green-800"
                                       data-target="{{ rel | lower }}">{{ rel }}</a>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                {% endfor %}
            {% else %}
                <p class="text-gray-500 italic text-center py-12">
                    Aucun terme disponible
                </p>
            {% endif %}
        </div>

        <!-- Stats -->
        {% if terms %}
        <div class="mt-12 pt-8 border-t border-gray-200">
            <p class="text-sm text-gray-500 text-center">
                <span id="visible-count">{{ terms | length }}</span> terme(s) sur {{ terms | length }}
            </p>
        </div>
        {% endif %}

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

<style>
    .term-item.hidden { display: none; }
    .letter-section.empty { display: none; }
    .alphabet-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        text-decoration: none;
        font-weight: 500;
        border-radius: 0.375rem;
        transition: all 0.2s;
    }
    .alphabet-link.active { background-color: #059669; color: white; }
    .alphabet-link.disabled { color: #d1d5db; pointer-events: none; }
    .alphabet-link:not(.disabled):not(.active) { color: #4b5563; }
    .alphabet-link:not(.disabled):hover { background-color: #f0fdf4; }
    .glossary-content dt { font-weight: 600; color: #1f2937; margin-top: 1.5rem; }
    .glossary-content dd { color: #4b5563; margin-left: 0; margin-top: 0.5rem; line-height: 1.75; }
</style>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('glossary-search');
        const items = document.querySelectorAll('.term-item');
        const letterSections = document.querySelectorAll('.letter-section');
        const alphabetNav = document.getElementById('alphabet-links');
        const countEl = document.getElementById('visible-count');

        // Build alphabet navigation
        const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
        const usedLetters = new Set();

        letterSections.forEach(section => {
            const letter = section.id.replace('letter-', '');
            usedLetters.add(letter);
        });

        alphabet.forEach(letter => {
            const link = document.createElement('a');
            link.href = '#letter-' + letter;
            link.textContent = letter;
            link.className = 'alphabet-link' + (usedLetters.has(letter) ? '' : ' disabled');
            alphabetNav.appendChild(link);
        });

        // Search functionality
        function filterItems() {
            const searchTerm = searchInput?.value.toLowerCase() || '';
            let visibleCount = 0;
            const visibleLetters = new Set();

            items.forEach(item => {
                const term = item.dataset.term || '';
                const definition = item.dataset.definition || '';
                const matches = !searchTerm || term.includes(searchTerm) || definition.includes(searchTerm);

                if (matches) {
                    item.classList.remove('hidden');
                    visibleCount++;
                    // Find parent letter section
                    const letterSection = item.closest('.letter-section') || item.previousElementSibling;
                    if (letterSection?.id) {
                        visibleLetters.add(letterSection.id.replace('letter-', ''));
                    }
                } else {
                    item.classList.add('hidden');
                }
            });

            // Update letter section visibility
            letterSections.forEach(section => {
                const letter = section.id.replace('letter-', '');
                const hasVisibleItems = section.querySelectorAll('.term-item:not(.hidden)').length > 0;
                section.classList.toggle('empty', !hasVisibleItems);
            });

            if (countEl) countEl.textContent = visibleCount;
        }

        searchInput?.addEventListener('input', filterItems);

        // Related term links
        document.querySelectorAll('.related-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const target = this.dataset.target;
                const targetItem = document.querySelector(`.term-item[data-term="${target}"]`);
                if (targetItem) {
                    targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    targetItem.classList.add('ring-2', 'ring-green-500');
                    setTimeout(() => targetItem.classList.remove('ring-2', 'ring-green-500'), 2000);
                }
            });
        });
    });
</script>
{% endblock %}