{# 
  EXEMPLE D'UTILISATION des composants class/
  Ce fichier montre comment utiliser les macros class_stats_card et trimester_nav
#}

{# Importer les composants #}
{% from 'components/class/class_stats_card.html' import class_stats_card %}
{% from 'components/class/trimester_nav.html' import trimester_nav %}

{# EXEMPLE 1 : Navigation par trimestre avec badges #}
<section class="mb-8">
    {{ trimester_nav(
        class_id=42,
        base_url=url_for('classes.class_detail', class_id=42),
        selected_trimester=2,
        badges={1: 4, 2: 3, 3: 2, 'global': 9}
    ) }}
</section>

{# EXEMPLE 2 : Grille de cards de statistiques #}
<section class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
    
    {# Card Évaluations (quantity) #}
    {{ class_stats_card(
        type='quantity',
        data={
            "total": 8,
            "completed": 6,
            "in_progress": 2,
            "not_started": 0
        },
        expanded=False
    ) }}
    
    {# Card Domaines (domains) #}
    {{ class_stats_card(
        type='domains',
        data=[
            {"name": "Nombres et calculs", "color": "#3B82F6", "total_points": 45.0, "elements_count": 12},
            {"name": "Géométrie", "color": "#10B981", "total_points": 38.5, "elements_count": 9},
            {"name": "Grandeurs et mesures", "color": "#F59E0B", "total_points": 22.0, "elements_count": 6},
            {"name": "Organisation et gestion de données", "color": "#EF4444", "total_points": 15.5, "elements_count": 4}
        ],
        expanded=True
    ) }}
    
    {# Card Compétences (competences) #}
    {{ class_stats_card(
        type='competences',
        data=[
            {"name": "Chercher", "color": "#8B5CF6", "total_points": 25.0, "elements_count": 6},
            {"name": "Modéliser", "color": "#06B6D4", "total_points": 20.0, "elements_count": 5},
            {"name": "Représenter", "color": "#84CC16", "total_points": 18.0, "elements_count": 4},
            {"name": "Calculer", "color": "#F97316", "total_points": 22.0, "elements_count": 7},
            {"name": "Communiquer", "color": "#EC4899", "total_points": 16.0, "elements_count": 3}
        ]
    ) }}
    
    {# Card Résultats (results) #}
    {{ class_stats_card(
        type='results',
        data={
            "mean": 14.2,
            "median": 15.0,
            "distribution": [0, 1, 3, 8, 12, 6, 2, 0],
            "min": 8.0,
            "max": 20.0
        }
    ) }}
    
</section>

{# EXEMPLE 3 : Usage avancé avec trimestres colorés #}
<section class="mt-8">
    <h2 class="text-2xl font-bold text-gray-900 mb-6">Statistiques par trimestre</h2>
    
    {% for trimester in [1, 2, 3] %}
    <div class="mb-6">
        {{ trimester_nav(
            class_id=42,
            base_url=url_for('classes.class_detail', class_id=42),
            selected_trimester=trimester,
            badges={1: 4, 2: 3, 3: 2, 'global': 9}
        ) }}
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            {{ class_stats_card(
                type='quantity',
                data={
                    "total": [4, 3, 2][loop.index0],
                    "completed": [3, 2, 1][loop.index0],
                    "in_progress": [1, 1, 1][loop.index0],
                    "not_started": [0, 0, 0][loop.index0]
                }
            ) }}
            
            {{ class_stats_card(
                type='results',
                data={
                    "mean": [13.5, 14.8, 15.1][loop.index0],
                    "median": [14.0, 15.5, 15.0][loop.index0],
                    "distribution": [[0, 2, 4, 6, 8, 4, 1, 0], [0, 1, 2, 5, 10, 7, 3, 0], [0, 0, 1, 3, 8, 9, 4, 1]][loop.index0],
                    "min": [7.0, 9.5, 10.0][loop.index0],
                    "max": [18.5, 19.0, 20.0][loop.index0]
                }
            ) }}
        </div>
    </div>
    {% endfor %}
</section>

{# JavaScript global requis #}
<script>
// JavaScript pour les interactions des composants
// (Déjà inclus dans chaque composant, mais peut être externalisé)

// Fonction globale pour gérer les stats cards
function initializeStatsCards() {
    document.querySelectorAll('.stats-card').forEach(card => {
        const expandBtn = card.querySelector('.expand-btn');
        if (expandBtn) {
            expandBtn.addEventListener('click', () => toggleStatsCard(expandBtn));
        }
    });
}

// Fonction globale pour gérer la navigation trimestre
function initializeTrimesterNav() {
    document.querySelectorAll('.trimester-nav .tab-btn').forEach(btn => {
        btn.addEventListener('click', () => navigateToTrimester(btn));
    });
}

// Initialisation au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    initializeStatsCards();
    initializeTrimesterNav();
});
</script>