feat: adding new classes is done

templates/classes.html

@@ -18,7 +18,7 @@
         }
     ] %}
     {% set primary_action = {
-        'url': '#',
+        'url': url_for('classes.new'),
         'text': 'Nouvelle classe',
         '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>'
     } %}
@@ -53,12 +53,12 @@
             </p>
             
             <div class="space-y-4">
-                <button class="inline-flex items-center bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-600 hover:to-green-600 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
+                <a href="{{ url_for('classes.new') }}" class="inline-flex items-center bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-600 hover:to-green-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 classe
-                </button>
+                </a>
                 
                 <div class="text-sm text-gray-500">
                     <p>💡 <strong>Astuce :</strong> Une classe peut contenir plusieurs élèves et être utilisée pour de nombreuses évaluations</p>
@@ -67,4 +67,90 @@
         </div>
     {% endif %}
 </div>
+
+<!-- Modal de confirmation de suppression -->
+<div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
+            <div class="p-6">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <svg class="w-12 h-12 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                    <div class="ml-4">
+                        <h3 class="text-lg font-medium text-gray-900">Supprimer la classe</h3>
+                        <p class="mt-1 text-sm text-gray-600" id="deleteMessage">
+                            Êtes-vous sûr de vouloir supprimer cette classe ?
+                        </p>
+                    </div>
+                </div>
+                
+                <div class="mt-6 flex justify-end space-x-3">
+                    <button onclick="closeDeleteModal()" class="bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium transition-colors">
+                        Annuler
+                    </button>
+                    <form id="deleteForm" method="POST" class="inline">
+                        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
+                            Supprimer définitivement
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function confirmDeleteClass(classId, className, studentsCount, assessmentsCount) {
+    const modal = document.getElementById('deleteModal');
+    const message = document.getElementById('deleteMessage');
+    const form = document.getElementById('deleteForm');
+    
+    // Configuration du message selon le contenu de la classe
+    if (studentsCount > 0 || assessmentsCount > 0) {
+        message.innerHTML = `
+            <strong>Impossible de supprimer la classe "${className}".</strong><br>
+            Elle contient <strong>${studentsCount} élève(s)</strong> et <strong>${assessmentsCount} évaluation(s)</strong>.<br>
+            Supprimez d'abord ces éléments pour pouvoir supprimer la classe.
+        `;
+        // Masquer le bouton de suppression et changer le titre
+        document.querySelector('#deleteForm button').style.display = 'none';
+        document.querySelector('#deleteModal h3').textContent = 'Suppression impossible';
+    } else {
+        message.innerHTML = `
+            Êtes-vous sûr de vouloir supprimer la classe <strong>"${className}"</strong> ?<br>
+            <span class="text-red-600">Cette action est irréversible.</span>
+        `;
+        // Réafficher le bouton de suppression et restaurer le titre
+        document.querySelector('#deleteForm button').style.display = 'inline';
+        document.querySelector('#deleteModal h3').textContent = 'Supprimer la classe';
+    }
+    
+    // Configuration de l'action du formulaire
+    form.action = `/classes/${classId}/delete`;
+    
+    // Afficher le modal
+    modal.classList.remove('hidden');
+}
+
+function closeDeleteModal() {
+    document.getElementById('deleteModal').classList.add('hidden');
+}
+
+// Fermeture au clic sur le fond
+document.getElementById('deleteModal').addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeDeleteModal();
+    }
+});
+
+// Fermeture avec la touche Échap
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeDeleteModal();
+    }
+});
+</script>
 {% endblock %}