{# Composant pour carte de classe dans la liste - Header simplifié #}

{% macro class_card(class) %}
{# Extraire le niveau de classe du nom (ex: "6ème A" -> 6, "Terminale S" -> "T") #}
{% set class_level = class.name[0] | int if class.name[0].isdigit() else ('T' if class.name.startswith('T') or class.name.startswith('t') else 'unknown') %}
{% set year_colors = {
    6: {'bg': 'from-blue-500 to-blue-600', 'accent': 'blue', 'icon_bg': 'bg-blue-100', 'icon_text': 'text-blue-600'},
    5: {'bg': 'from-green-500 to-green-600', 'accent': 'green', 'icon_bg': 'bg-green-100', 'icon_text': 'text-green-600'},
    4: {'bg': 'from-purple-500 to-purple-600', 'accent': 'purple', 'icon_bg': 'bg-purple-100', 'icon_text': 'text-purple-600'},
    3: {'bg': 'from-orange-500 to-orange-600', 'accent': 'orange', 'icon_bg': 'bg-orange-100', 'icon_text': 'text-orange-600'},
    2: {'bg': 'from-red-500 to-red-600', 'accent': 'red', 'icon_bg': 'bg-red-100', 'icon_text': 'text-red-600'},
    1: {'bg': 'from-pink-500 to-pink-600', 'accent': 'pink', 'icon_bg': 'bg-pink-100', 'icon_text': 'text-pink-600'},
    'T': {'bg': 'from-indigo-500 to-indigo-600', 'accent': 'indigo', 'icon_bg': 'bg-indigo-100', 'icon_text': 'text-indigo-600'},
    'unknown': {'bg': 'from-gray-500 to-gray-600', 'accent': 'gray', 'icon_bg': 'bg-gray-100', 'icon_text': 'text-gray-600'}
} %}
{% set year_config = year_colors.get(class_level, year_colors['unknown']) %}

<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 simplifié avec identité de classe -->
    <div class="bg-gradient-to-r {{ year_config.bg }} p-4 text-white">
        <div class="flex items-center space-x-3">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <span class="text-lg font-black">{{ class.name[:2] }}</span>
            </div>
            <div>
                <div class="text-xl md:text-2xl font-black">{{ class.name }}</div>
                <div class="text-sm opacity-90">{{ class.year }}</div>
            </div>
        </div>
    </div>
    
    <!-- Contenu principal -->
    <div class="p-4 flex flex-col justify-between flex-1">
        <!-- Description (si présente) -->
        {% if class.description %}
            <p class="text-sm text-gray-600 mb-4 line-clamp-2 italic">{{ class.description }}</p>
        {% endif %}
        
        <div class="flex flex-col{% if not class.description %} mt-2{% endif %}">
            <!-- Actions principales -->
            <div class="grid grid-cols-2 gap-2 mb-3">
                <a href="{{ url_for('classes.students', id=class.id) }}" 
                   class="bg-{{ year_config.accent }}-50 hover:bg-{{ year_config.accent }}-100 text-{{ year_config.accent }}-700 hover:text-{{ year_config.accent }}-900 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors flex items-center justify-center space-x-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 6a3 3 0 11-6 0 3 3 0 616 0zM17 6a3 3 0 11-6 0 3 3 0 616 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 515 5v1H1v-1a5 5 0 515-5z"/>
                    </svg>
                    <span>{{ class.students|length }} Élèves</span>
                </a>

                <a href="{{ url_for('assessments.list') }}?class={{ class.id }}" 
                   class="bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors flex items-center justify-center space-x-2">
                    <svg class="w-4 h-4" 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 712-2v1a1 1 0 102 0V3a2 2 0 712 2v6a2 2 0 71-2 2H6a2 2 0 71-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
                    </svg>
                    <span>{{ class.assessments|length }} Évaluations</span>
                </a>
            </div>

            <!-- Actions secondaires -->
            <div class="pt-2 border-t border-gray-100 flex gap-2">
                <a href="{{ url_for('classes.edit', id=class.id) }}" 
                   class="flex-1 text-center text-gray-600 hover:text-blue-700 text-xs font-medium transition-colors flex items-center justify-center py-2 hover:bg-blue-50 rounded-lg">
                    <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>
                    Modifier
                </a>
                
                <a href="{{ url_for('classes.dashboard', id=class.id) }}" 
                   class="flex-1 text-center text-gray-600 hover:text-green-700 text-xs font-medium transition-colors flex items-center justify-center py-2 hover:bg-green-50 rounded-lg">
                    <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>
                    Voir
                </a>
            </div>
        </div>
    </div>
</div>
{% endmacro %}