{# Composant pour carte d'évaluation dans la liste #}
{% from 'components/common/macros.html' import progress_indicator %}

{% macro assessment_card(assessment) %}
{% set progress = assessment.grading_progress %}
{% set progress_colors = {
    0: {'bg': 'from-red-500 to-red-600', 'text': 'text-red-100', 'badge': 'bg-red-400/30'},
    'in_progress': {'bg': 'from-orange-500 to-orange-600', 'text': 'text-orange-100', 'badge': 'bg-orange-400/30'},
    100: {'bg': 'from-green-500 to-green-600', 'text': 'text-green-100', 'badge': 'bg-green-400/30'}
} %}
{% if progress.percentage == 0 %}
    {% set colors = progress_colors[0] %}
{% elif progress.percentage == 100 %}
    {% set colors = progress_colors[100] %}
{% else %}
    {% set colors = progress_colors['in_progress'] %}
{% endif %}
{% set trimester_colors = {
    1: {'accent': 'violet', 'icon_text': 'text-violet-600'},
    2: {'accent': 'purple', 'icon_text': 'text-purple-600'},
    3: {'accent': 'fuchsia', 'icon_text': 'text-fuchsia-600'}
} %}
{% set trimester_config = trimester_colors[assessment.trimester] %}

<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden flex flex-col">
    <!-- Header avec classe + progression (couleur selon statut correction) -->
    <div class="bg-gradient-to-r {{ colors.bg }} p-4 text-white">
        <div class="flex items-center justify-between">
            <!-- Classe (élément principal) -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="text-base md:text-lg font-semibold {{ colors.text }}">{{ assessment.class_group.name }}</div>
            </div>
            
            <!-- Progression (élément principal) -->
            <div class="flex items-center space-x-2">
                <div class="{{ colors.badge }} px-3 py-1 rounded-full">
                    <div class="flex items-center space-x-2 text-sm font-medium">
                        {% if progress.percentage == 0 %}
                            <span class="w-2 h-2 bg-red-300 rounded-full"></span>
                            <span>{{ progress.percentage }}%</span>
                        {% elif progress.percentage == 100 %}
                            <span class="w-2 h-2 bg-green-300 rounded-full"></span>
                            <span>TERMINÉ</span>
                        {% else %}
                            <span class="w-2 h-2 bg-orange-300 rounded-full animate-pulse"></span>
                            <span>{{ progress.percentage }}%</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Contenu principal -->
    <div class="p-4 flex flex-col justify-between flex-1">
        <!-- Titre de l'évaluation (très proéminent) -->
        <h3 class="text-xl md:text-2xl font-black text-gray-900 mb-3 line-clamp-2 leading-tight">{{ assessment.title }}</h3>
        
        <!-- Description (si présente) -->
        {% if assessment.description %}
            <p class="text-sm text-gray-600 mb-4 line-clamp-2 italic">{{ assessment.description }}</p>
        {% endif %}
        
        <div class="flex flex-col">
            <!-- Meta informations en ligne compacte -->
            <div class="flex flex-wrap items-center gap-4 text-xs font-medium text-gray-600 mb-2">
                <div class="flex items-center space-x-1">
                    <span class="w-2 h-2 bg-{{ trimester_config.accent }}-400 rounded-full"></span>
                    <span>T{{ assessment.trimester }}</span>
                </div>
                <div class="flex items-center space-x-1">
                    <svg class="w-3 h-3" 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>
                    <span>{{ assessment.date.strftime('%d/%m') }}</span>
                </div>
                <div class="flex items-center space-x-1">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
                    </svg>
                    <span>{{ assessment.exercises|length }} ex</span>
                </div>
                <div class="bg-{{ trimester_config.accent }}-100 text-{{ trimester_config.accent }}-800 px-2 py-1 rounded-full">
                    <span>Coeff {{ assessment.coefficient }}</span>
                </div>
                <div class="text-gray-500 ml-auto">
                    {{ progress.completed }}/{{ progress.total }} notes
                </div>
            </div>

            <!-- Actions (toujours en bas) -->
            <div class="flex space-x-2">
                <a href="{{ url_for('assessments.detail', id=assessment.id) }}" 
                   class="flex-1 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                    </svg>
                    Détails
                </a>

                {% if progress.percentage == 100 %}
                <!-- Correction terminée : bouton Résultats -->
                <a href="{{ url_for('assessments.results', id=assessment.id) }}" 
                   class="flex-1 bg-green-50 hover:bg-green-100 text-green-700 hover:text-green-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    Résultats
                </a>
                {% else %}
                <!-- Correction non terminée : bouton Noter -->
                <a href="{{ url_for('grading.assessment_grading', assessment_id=assessment.id) }}" 
                   class="flex-1 bg-orange-50 hover:bg-orange-100 text-orange-700 hover:text-orange-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                    </svg>
                    Noter
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endmacro %}