{% extends "base.html" %}

{% block title %}{{ assessment.title }} - Gestion Scolaire{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <a href="{{ url_for('assessments.list') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium mb-2 inline-block">
                ← Retour aux évaluations
            </a>
            <h1 class="text-2xl font-bold text-gray-900">{{ assessment.title }}</h1>
            <p class="text-gray-600">{{ assessment.class_group.name }} - {{ assessment.date.strftime('%d/%m/%Y') }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ url_for('assessments.edit', id=assessment.id) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                Modifier l'évaluation complète
            </a>
            <button onclick="if(confirm('Êtes-vous sûr de vouloir supprimer cette évaluation ?')) { document.getElementById('delete-form').submit(); }" 
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                Supprimer
            </button>
        </div>
    </div>
    
    <form id="delete-form" method="POST" action="{{ url_for('assessments.delete', id=assessment.id) }}" style="display: none;"></form>
    
    <!-- Informations de l'évaluation -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Informations générales</h2>
        </div>
        <div class="px-6 py-4">
            <dl class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Classe</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ assessment.class_group.name }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ assessment.date.strftime('%d/%m/%Y') }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Coefficient</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ assessment.coefficient }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Nombre d'exercices</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ assessment.exercises|length }}</dd>
                </div>
                {% if assessment.description %}
                <div class="md:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Description</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ assessment.description }}</dd>
                </div>
                {% endif %}
            </dl>
        </div>
    </div>
    
    <!-- Exercices -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h2 class="text-lg font-medium text-gray-900">Exercices</h2>
            <span class="text-sm text-gray-500">
                Utilisez "Modifier l'évaluation complète" pour ajouter des exercices
            </span>
        </div>
        <div class="px-6 py-4">
            {% if assessment.exercises %}
                <div class="space-y-4">
                    {% for exercise in assessment.exercises|sort(attribute='order') %}
                        <div class="border border-gray-200 rounded-lg p-4">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <h3 class="text-sm font-medium text-gray-900">{{ exercise.title }}</h3>
                                    {% if exercise.description %}
                                        <p class="text-sm text-gray-600 mt-1">{{ exercise.description }}</p>
                                    {% endif %}
                                    <div class="text-xs text-gray-500 mt-2">
                                        {{ exercise.grading_elements|length }} élément(s) de notation
                                    </div>
                                </div>
                                <div class="flex space-x-2 ml-4">
                                    <a href="{{ url_for('exercises.detail', assessment_id=assessment.id, id=exercise.id) }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                        Voir détails
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-8">
                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8m9-16v20m5-14H9m1 4h8m1 2h8m-8 6h8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">Aucun exercice</h3>
                    <p class="mt-1 text-sm text-gray-500">Commencez par ajouter le premier exercice de cette évaluation.</p>
                    <div class="mt-6">
                        <a href="{{ url_for('assessments.edit', id=assessment.id) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                            Modifier l'évaluation complète
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Actions rapides -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Actions</h2>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <a href="{{ url_for('grading.assessment_grading', assessment_id=assessment.id) }}" class="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    <svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V8z" clip-rule="evenodd"/>
                    </svg>
                    Saisir les notes
                </a>
                <button class="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    <svg class="w-5 h-5 mr-2 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM3 4a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V4z" clip-rule="evenodd"/>
                    </svg>
                    Voir les résultats
                </button>
                <button class="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM3 4a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V4z" clip-rule="evenodd"/>
                    </svg>
                    Exporter
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}