{% extends "base.html" %}
{% from 'components/common/macros.html' import hero_section, 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"
    ) }}

    {# Filtres avec composant réutilisable #}
    {% 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 = [
        {
            'id': 'trimester-filter',
            'label': 'Trimestre',
            'options': [
                {'value': '', 'label': 'Tous'},
                {'value': '1', 'label': 'Trimestre 1'},
                {'value': '2', 'label': 'Trimestre 2'},
                {'value': '3', 'label': 'Trimestre 3'}
            ]
        },
        {
            'id': 'class-filter',
            'label': 'Classe',
            'options': class_options
        },
        {
            'id': 'sort-filter',
            'label': 'Tri',
            'options': [
                {'value': 'date_desc', 'label': 'Plus récent'},
                {'value': 'date_asc', 'label': 'Plus ancien'},
                {'value': 'title', 'label': 'Titre A-Z'},
                {'value': 'class', 'label': 'Classe'}
            ]
        }
    ] %}
    
    {% call filter_section(filters, {'trimester-filter': current_trimester, 'class-filter': current_class, 'sort-filter': current_sort}) %}
        <div class="flex items-center space-x-4">
            <div class="text-sm text-gray-500 font-medium">
                {{ assessments|length }} évaluation(s)
            </div>
            <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>

{# JavaScript géré par le système centralisé #}

{% endblock %}