{% extends "base.html" %}
{% from 'components/common/macros.html' import hero_section, simple_filter_section %}
{% from 'components/assessment/assessment_card.html' import assessment_card %}

{% block title %}Évaluations - Gestion Scolaire{% endblock %}


{% block content %}
<div class="space-y-8">
    {# Hero Section avec composant réutilisable #}
    {% set meta_info = [
        {
            'icon': '<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/></svg>',
            'text': assessments|length ~ ' évaluations'
        },
        {
            'icon': '<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/></svg>',
            'text': 'Année scolaire 2024-2025'
        }
    ] %}
    {% set primary_action = {
        'url': url_for('assessments.new'),
        'text': 'Nouvelle évaluation',
        'icon': '<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>'
    } %}
    {{ hero_section(
        title="Mes Évaluations 📚",
        subtitle="Gérez et organisez toutes vos évaluations",
        meta_info=meta_info,
        primary_action=primary_action,
        gradient_class="from-purple-600 to-blue-600"
    ) }}

    {# Configuration des filtres simplifiés #}
    {% set class_options = [{'value': '', 'label': 'Toutes'}] %}
    {% for class_group in classes %}
        {% set _ = class_options.append({'value': class_group.id|string, 'label': class_group.name}) %}
    {% endfor %}
    
    {% set filters_config = {
        'trimester': True,
        'correction': True,
        'class_options': class_options
    } %}
    
    {% call simple_filter_section(
        filters_config,
        {
            'trimester-filter': current_trimester,
            'class-filter': current_class,
            'correction-filter': current_correction
        },
        total_items=total_assessments_count,
        filtered_items=assessments|length
    ) %}
        <div class="flex flex-col space-y-3">
            <div class="md:hidden">
                <a href="{{ url_for('assessments.new') }}" 
                   class="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
                    </svg>
                    Nouvelle évaluation
                </a>
            </div>
        </div>
    {% endcall %}

    {% if assessments %}
        <!-- Grille d'évaluations avec composants -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for assessment in assessments %}
                {{ assessment_card(assessment) }}
            {% endfor %}
        </div>
    {% else %}
        <!-- État vide amélioré -->
        <div class="bg-white rounded-xl shadow-lg p-12 text-center">
            <div class="w-24 h-24 bg-gradient-to-br from-purple-100 to-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-12 h-12 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
                </svg>
            </div>
            
            <h3 class="text-xl font-bold text-gray-900 mb-2">Aucune évaluation créée</h3>
            <p class="text-gray-600 mb-6 max-w-md mx-auto">
                Commencez votre gestion d'évaluations en créant votre première évaluation. 
                Vous pourrez y ajouter des exercices et définir le barème directement.
            </p>
            
            <div class="space-y-4">
                <a href="{{ url_for('assessments.new') }}" 
                   class="inline-flex items-center bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
                    </svg>
                    Créer ma première évaluation
                </a>
                
                <div class="text-sm text-gray-500">
                    <p>💡 <strong>Astuce :</strong> Une évaluation peut contenir plusieurs exercices avec des barèmes différents</p>
                </div>
            </div>
        </div>
    {% endif %}
</div>

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/simple-filters.js') }}"></script>
<script>
// Configuration spécifique à la page assessments
document.addEventListener('DOMContentLoaded', function() {
    // Mettre à jour les compteurs si l'instance existe
    if (window.simpleFilters) {
        const totalCount = {{ total_assessments_count }};
        const filteredCount = {{ assessments|length }};
        window.simpleFilters.updateCounts(totalCount, filteredCount);
    }
});
</script>
{% endblock %}