Spaces:

Docfile
/

bbd

Sleeping

App Files Files Community

Docfile commited on Feb 19

Commit

0e5adf5

verified ·

1 Parent(s): 6af242d

Update templates/gere.html

Browse files

Files changed (1) hide show

templates/gere.html +403 -190

templates/gere.html CHANGED Viewed

@@ -4,276 +4,489 @@
   <meta charset="UTF-8">
   <title>Gestion des Données</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
   <style>
-    @keyframes slideIn {
-      from {
-        transform: translateY(-20px);
-        opacity: 0;
-      }
-      to {
-        transform: translateY(0);
-        opacity: 1;
-      }
     }
-    @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
     }
-    @keyframes scaleIn {
-      from {
-        transform: scale(0.95);
-        opacity: 0;
-      }
-      to {
-        transform: scale(1);
-        opacity: 1;
-      }
     }
-    @keyframes shimmer {
-      0% {
-        background-position: -1000px 0;
-      }
-      100% {
-        background-position: 1000px 0;
-      }
     }
-    .animate-slideIn {
-      animation: slideIn 0.5s ease-out;
     }
-    .animate-fadeIn {
-      animation: fadeIn 0.5s ease-out;
     }
-    .animate-scaleIn {
-      animation: scaleIn 0.3s ease-out;
     }
-    .card-hover {
-      transition: all 0.3s ease;
     }
-    .card-hover:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
     }
-    .shimmer {
-      background: linear-gradient(90deg, #f6f7f8 0%, #edeef1 50%, #f6f7f8 100%);
-      background-size: 1000px 100%;
-      animation: shimmer 2s infinite linear;
     }
-    .tab-active {
-      position: relative;
     }
-    .tab-active::after {
-      content: '';
-      position: absolute;
-      bottom: -2px;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background: #3b82f6;
-      transform: scaleX(0);
-      transition: transform 0.3s ease;
     }
-    .tab-active:hover::after,
-    .tab-active.active::after {
-      transform: scaleX(1);
     }
-    .btn-primary {
-      @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
     }
-    .btn-warning {
-      @apply bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
     }
-    .btn-danger {
-      @apply bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
     }
-    .form-input {
-      @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300;
     }
     .alert {
-      @apply p-4 mb-4 rounded-lg shadow-lg animate-slideIn;
     }
-    .alert-success {
-      @apply bg-green-100 border-l-4 border-green-500 text-green-700;
     }
-    .alert-danger {
-      @apply bg-red-100 border-l-4 border-red-500 text-red-700;
     }
   </style>
 </head>
-<body class="bg-gray-50 min-h-screen">
-  <div class="container mx-auto px-4 py-8 animate-fadeIn">
-    <h1 class="text-4xl font-bold text-gray-800 mb-8 animate-slideIn">
-      Gestion des Données
-    </h1>
     {% with messages = get_flashed_messages(with_categories=true) %}
       {% if messages %}
         {% for category, message in messages %}
-          <div class="alert alert-{{ category }} animate-scaleIn">
             {{ message }}
           </div>
         {% endfor %}
       {% endif %}
     {% endwith %}
-    <!-- Tabs -->
-    <div class="mb-6 border-b border-gray-200">
-      <nav class="flex space-x-8" aria-label="Tabs">
-        <button class="tab-active px-4 py-2 text-gray-600 hover:text-blue-600 active">
-          <i class="fas fa-book mr-2"></i>Matières
-        </button>
-        <button class="tab-active px-4 py-2 text-gray-600 hover:text-blue-600">
-          <i class="fas fa-list mr-2"></i>Sous-Catégories
-        </button>
-        <button class="tab-active px-4 py-2 text-gray-600 hover:text-blue-600">
-          <i class="fas fa-file-alt mr-2"></i>Textes
-        </button>
-        <button class="tab-active px-4 py-2 text-gray-600 hover:text-blue-600">
-          <i class="fas fa-plus-circle mr-2"></i>Ajouter
-        </button>
-      </nav>
-    </div>
-    <!-- Content -->
-    <div class="grid gap-6">
-      <!-- Matières Section -->
-      <div class="animate-scaleIn">
-        {% for matiere in matieres %}
-          <div class="card-hover bg-white rounded-lg shadow-md p-6 mb-4">
-            <div class="flex justify-between items-center">
-              <h3 class="text-lg font-semibold text-gray-800">{{ matiere.nom }}</h3>
-              <div class="flex space-x-2">
-                <button class="btn-warning edit-button">
-                  <i class="fas fa-edit mr-2"></i>Modifier
-                </button>
-                <form method="post" class="inline">
-                  <input type="hidden" name="action" value="delete_matiere_{{ matiere.id }}">
-                  <button type="submit" class="btn-danger">
-                    <i class="fas fa-trash mr-2"></i>Supprimer
-                  </button>
                 </form>
               </div>
-            </div>
-            <!-- Form édition -->
-            <form method="post" class="hidden editable mt-4">
-              <input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}">
-              <div class="flex space-x-4">
-                <input type="text" name="edit_nom_matiere_{{ matiere.id }}"
-                       value="{{ matiere.nom }}"
-                       class="form-input flex-grow"
-                       placeholder="Nom de la matière">
-                <button type="submit" class="btn-primary">
-                  <i class="fas fa-check mr-2"></i>Sauvegarder
-                </button>
-                <button type="button" class="btn-danger cancel-edit">
-                  <i class="fas fa-times mr-2"></i>Annuler
-                </button>
               </div>
             </form>
           </div>
-        {% endfor %}
-      </div>
-      <!-- Add Form -->
-      <div class="bg-white rounded-lg shadow-lg p-6 animate-scaleIn">
-        <h2 class="text-xl font-bold text-gray-800 mb-4">
-          <i class="fas fa-plus-circle mr-2"></i>Ajouter une nouvelle matière
-        </h2>
-        <form method="post" class="space-y-4">
-          <input type="hidden" name="action" value="add_matiere">
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-2">
-              Nom de la matière
-            </label>
-            <input type="text" name="nom_matiere"
-                   class="form-input"
-                   placeholder="Entrez le nom de la matière"
-                   required>
           </div>
-          <button type="submit" class="btn-primary w-full">
-            <i class="fas fa-plus mr-2"></i>Ajouter la matière
-          </button>
-        </form>
       </div>
     </div>
   </div>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     $(document).ready(function() {
-      // Tab switching with animations
-      $('.tab-active').click(function() {
-        $('.tab-active').removeClass('active');
-        $(this).addClass('active');
-        // Add slide animation to content
-        $('.grid > div').addClass('animate-slideIn');
-        setTimeout(() => {
-          $('.grid > div').removeClass('animate-slideIn');
-        }, 500);
-      });
-      // Edit button functionality with animations
       $(document).on('click', '.edit-button', function(e) {
         e.preventDefault();
-        const card = $(this).closest('.card-hover');
-        const form = card.find('.editable');
-        form.slideDown(300).css('display', 'block');
-        card.find('h3').fadeOut(300);
-        $(this).fadeOut(300);
       });
-      // Cancel edit with animations
       $(document).on('click', '.cancel-edit', function(e) {
         e.preventDefault();
-        const card = $(this).closest('.card-hover');
-        const form = card.find('.editable');
-        form.slideUp(300);
-        card.find('h3').fadeIn(300);
-        card.find('.edit-button').fadeIn(300);
       });
-      // Smooth deletion animation
-      $('form[method="post"]').submit(function(e) {
-        if ($(this).find('.btn-danger').length) {
           if (!confirm('Êtes-vous sûr de vouloir supprimer cet élément ?')) {
             e.preventDefault();
-          } else {
-            $(this).closest('.card-hover').addClass('animate-slideIn').fadeOut(500);
           }
         }
       });
-      // Add loading animation
-      $('.btn-primary').click(function() {
-        $(this).addClass('shimmer');
-        setTimeout(() => {
-          $(this).removeClass('shimmer');
-        }, 1000);
-      });
     });
   </script>
 </body>

   <meta charset="UTF-8">
   <title>Gestion des Données</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
   <style>
+    body {
+      background-color: #f8f9fa;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
     }
+    .page-title {
+      color: #2c3e50;
+      margin-bottom: 2rem;
+      font-weight: 600;
     }
+    .card {
+      margin-bottom: 20px;
+      border: none;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: transform 0.2s ease-in-out;
     }
+    .card:hover {
+      transform: translateY(-2px);
     }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 2px solid #e9ecef;
+      font-weight: 600;
+      padding: 1rem 1.25rem;
     }
+    .nav-tabs {
+      border-bottom: 2px solid #dee2e6;
+      margin-bottom: 1rem;
     }
+    .nav-tabs .nav-link {
+      border: none;
+      color: #6c757d;
+      font-weight: 500;
+      padding: 1rem 1.5rem;
+      transition: all 0.2s ease-in-out;
     }
+    .nav-tabs .nav-link:hover {
+      border: none;
+      color: #007bff;
     }
+    .nav-tabs .nav-link.active {
+      background-color: transparent;
+      border: none;
+      border-bottom: 2px solid #007bff;
+      color: #007bff;
     }
+    .list-group-item {
+      border: none;
+      border-bottom: 1px solid #e9ecef;
+      padding: 1rem;
     }
+    .list-group-item:last-child {
+      border-bottom: none;
     }
+    .btn {
+      border-radius: 4px;
+      padding: 0.5rem 1rem;
+      transition: all 0.2s ease-in-out;
     }
+    .btn-warning {
+      background-color: #ffc107;
+      border-color: #ffc107;
+      color: #212529;
     }
+    .btn-danger {
+      background-color: #dc3545;
+      border-color: #dc3545;
+      color: #fff;
     }
+    .btn-success {
+      background-color: #28a745;
+      border-color: #28a745;
+      color: #fff;
     }
+    .form-control {
+      border-radius: 4px;
+      border: 1px solid #ced4da;
+      padding: 0.5rem;
     }
+    .form-control:focus {
+      border-color: #80bdff;
+      box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
     }
     .alert {
+      border-radius: 4px;
+      margin-bottom: 1rem;
+      animation: fadeInOut 5s ease-in-out;
+    }
+    @keyframes fadeInOut {
+      0% { opacity: 0; }
+      10% { opacity: 1; }
+      90% { opacity: 1; }
+      100% { opacity: 0; }
+    }
+    .editable {
+      display: none;
+      background-color: #f8f9fa;
+      padding: 1rem;
+      border-radius: 4px;
+      margin-top: 0.5rem;
+    }
+    .display-mode {
+      line-height: 1.5;
     }
+    .action-buttons {
+      display: flex;
+      gap: 0.5rem;
     }
+    .text-muted {
+      font-size: 0.875rem;
+    }
+    .btn-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
     }
   </style>
 </head>
+<body>
+  <div class="container mt-4">
+    <h1 class="page-title">Gestion des Données</h1>
     {% with messages = get_flashed_messages(with_categories=true) %}
       {% if messages %}
         {% for category, message in messages %}
+          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
             {{ message }}
+            <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
+              <span aria-hidden="true">&times;</span>
+            </button>
           </div>
         {% endfor %}
       {% endif %}
     {% endwith %}
+    <ul class="nav nav-tabs" id="gestionTab" role="tablist">
+      <li class="nav-item">
+        <a class="nav-link active" id="matieres-tab" data-toggle="tab" href="#matieres" role="tab">
+          <i class="fas fa-book"></i> Matières
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="sous-categories-tab" data-toggle="tab" href="#sous-categories" role="tab">
+          <i class="fas fa-list"></i> Sous-Catégories
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="textes-tab" data-toggle="tab" href="#textes" role="tab">
+          <i class="fas fa-file-alt"></i> Textes
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="ajouter-tab" data-toggle="tab" href="#ajouter" role="tab">
+          <i class="fas fa-plus-circle"></i> Ajouter
+        </a>
+      </li>
+    </ul>
+    <div class="tab-content" id="gestionTabContent">
+      <!-- Onglet Matières -->
+      <div class="tab-pane fade show active" id="matieres" role="tabpanel">
+        <div class="card">
+          <div class="card-header">
+            <i class="fas fa-book mr-2"></i>Liste des Matières
+          </div>
+          <ul class="list-group list-group-flush">
+            {% for matiere in matieres %}
+              <li class="list-group-item">
+                <div class="d-flex justify-content-between align-items-center">
+                  <span class="display-mode">{{ matiere.nom }}</span>
+                  <div class="action-buttons">
+                    <button class="btn btn-warning btn-sm btn-icon edit-button">
+                      <i class="fas fa-edit"></i> Modifier
+                    </button>
+                    <form method="post" class="d-inline">
+                      <input type="hidden" name="action" value="delete_matiere_{{ matiere.id }}">
+                      <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ?');">
+                        <i class="fas fa-trash"></i> Supprimer
+                      </button>
+                    </form>
+                  </div>
+                </div>
+                <form method="post" class="editable">
+                  <input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}">
+                  <div class="input-group">
+                    <input type="text" name="edit_nom_matiere_{{ matiere.id }}" value="{{ matiere.nom }}" class="form-control">
+                    <div class="input-group-append">
+                      <button type="submit" class="btn btn-success btn-icon">
+                        <i class="fas fa-check"></i> Enregistrer
+                      </button>
+                      <button type="button" class="btn btn-secondary btn-icon cancel-edit">
+                        <i class="fas fa-times"></i> Annuler
+                      </button>
+                    </div>
+                  </div>
                 </form>
+              </li>
+            {% else %}
+              <li class="list-group-item text-center text-muted">Aucune matière trouvée.</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      <!-- Onglet Sous-Catégories -->
+      <div class="tab-pane fade" id="sous-categories" role="tabpanel">
+        <div class="card">
+          <div class="card-header">
+            <i class="fas fa-list mr-2"></i>Liste des Sous-Catégories
+          </div>
+          <ul class="list-group list-group-flush">
+            {% for sous_categorie in sous_categories %}
+              <li class="list-group-item">
+                <div class="d-flex justify-content-between align-items-center">
+                  <span class="display-mode">
+                    {{ sous_categorie.nom }}
+                    <small class="text-muted">
+                      <i class="fas fa-book mr-1"></i>{{ sous_categorie.matiere.nom }}
+                    </small>
+                  </span>
+                  <div class="action-buttons">
+                    <button class="btn btn-warning btn-sm btn-icon edit-button">
+                      <i class="fas fa-edit"></i> Modifier
+                    </button>
+                    <form method="post" class="d-inline">
+                      <input type="hidden" name="action" value="delete_sous_categorie_{{ sous_categorie.id }}">
+                      <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ?');">
+                        <i class="fas fa-trash"></i> Supprimer
+                      </button>
+                    </form>
+                  </div>
+                </div>
+                <form method="post" class="editable">
+                  <input type="hidden" name="action" value="edit_sous_categorie_{{ sous_categorie.id }}">
+                  <div class="form-row">
+                    <div class="col-md-6 mb-2">
+                      <input type="text" name="edit_nom_sous_categorie_{{ sous_categorie.id }}" value="{{ sous_categorie.nom }}" class="form-control" placeholder="Nom">
+                    </div>
+                    <div class="col-md-4 mb-2">
+                      <select name="edit_matiere_id_{{ sous_categorie.id }}" class="form-control">
+                        {% for matiere in matieres %}
+                          <option value="{{ matiere.id }}" {% if matiere.id == sous_categorie.matiere_id %}selected{% endif %}>
+                            {{ matiere.nom }}
+                          </option>
+                        {% endfor %}
+                      </select>
+                    </div>
+                    <div class="col-md-2">
+                      <div class="btn-group">
+                        <button type="submit" class="btn btn-success btn-icon">
+                          <i class="fas fa-check"></i> Enregistrer
+                        </button>
+                        <button type="button" class="btn btn-secondary btn-icon cancel-edit">
+                          <i class="fas fa-times"></i> Annuler
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </li>
+            {% else %}
+              <li class="list-group-item text-center text-muted">Aucune sous-catégorie trouvée.</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      <!-- Onglet Textes -->
+      <div class="tab-pane fade" id="textes" role="tabpanel">
+        <div class="card">
+          <div class="card-header">
+            <i class="fas fa-file-alt mr-2"></i>Liste des Textes
+          </div>
+          <ul class="list-group list-group-flush">
+            {% for texte in textes %}
+              <li class="list-group-item">
+                <div class="d-flex justify-content-between align-items-center">
+                  <span class="display-mode">
+                    <strong>{{ texte.titre }}</strong>
+                    <br>
+                    <small class="text-muted">
+                      <i class="fas fa-list mr-1"></i>{{ texte.sous_categorie.nom }}
+                      <i class="fas fa-book ml-2 mr-1"></i>{{ texte.sous_categorie.matiere.nom }}
+                    </small>
+                  </span>
+                  <div class="action-buttons">
+                    <button class="btn btn-warning btn-sm btn-icon edit-button">
+                      <i class="fas fa-edit"></i> Modifier
+                    </button>
+                    <form method="post" class="d-inline">
+                      <input type="hidden" name="action" value="delete_texte_{{ texte.id }}">
+                      <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?');">
+                        <i class="fas fa-trash"></i> Supprimer
+                      </button>
+                    </form>
+                  </div>
+                </div>
+                <form method="post" class="editable">
+                  <input type="hidden" name="action" value="edit_texte_{{ texte.id }}">
+                  <div class="form-group">
+                    <input type="text" name="edit_titre_texte_{{ texte.id }}" value="{{ texte.titre }}" class="form-control" placeholder="Titre">
+                  </div>
+                  <div class="form-group">
+                    <textarea name="edit_contenu_texte_{{ texte.id }}" class="form-control" rows="3" placeholder="Contenu">{{ texte.contenu }}</textarea>
+                  </div>
+                  <div class="form-row">
+                    <div class="col-md-8 mb-2">
+                      <select name="edit_sous_categorie_id_{{ texte.id }}" class="form-control">
+                        {% for sous_categorie in sous_categories %}
+                          <option value="{{ sous_categorie.id }}" {% if sous_categorie.id == texte.sous_categorie_id %}selected{% endif %}>
+                            {{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})
+                          </option>
+                        {% endfor %}
+                      </select>
+                    </div>
+                    <div class="col-md-4">
+                      <div class="btn-group">
+                        <button type="submit" class="btn btn-success btn-icon">
+                          <i class="fas fa-check"></i> Enregistrer
+                        </button>
+                        <button type="button" class="btn btn-secondary btn-icon cancel-edit">
+                          <i class="fas fa-times"></i> Annuler
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </li>
+            {% else %}
+              <li class="list-group-item text-center text-muted">Aucun texte trouvé.</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      <!-- Onglet Ajouter -->
+      <div class="tab-pane fade" id="ajouter" role="tabpanel">
+        <!-- Formulaire d'ajout d'une matière -->
+        <div class="card mt-3">
+          <div class="card-header">
+            <i class="fas fa-plus-circle mr-2"></i>Ajouter une Matière
+          </div>
+          <div class="card-body">
+            <form method="post">
+              <input type="hidden" name="action" value="add_matiere">
+              <div class="form-group">
+                <label for="nom_matiere">Nom de la Matière</label>
+                <input type="text" id="nom_matiere" name="nom_matiere" class="form-control" required>
               </div>
+              <button type="submit" class="btn btn-primary btn-icon">
+                <i class="fas fa-plus"></i> Ajouter
+              </button>
+            </form>
+          </div>
+        </div>
+        <!-- Formulaire d'ajout d'une sous-catégorie -->
+        <div class="card mt-3">
+          <div class="card-header">
+            <i class="fas fa-plus-circle mr-2"></i>Ajouter une Sous-Catégorie
+          </div>
+          <div class="card-body">
+            <form method="post">
+              <input type="hidden" name="action" value="add_sous_categorie">
+              <div class="form-group">
+                <label for="nom_sous_categorie">Nom de la Sous-Catégorie</label>
+                <input type="text" id="nom_sous_categorie" name="nom_sous_categorie" class="form-control" required>
+              </div>
+              <div class="form-group">
+                <label for="matiere_id">Matière associée</label>
+                <select id="matiere_id" name="matiere_id" class="form-control" required>
+                  {% for matiere in matieres %}
+                    <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
+                  {% endfor %}
+                </select>
               </div>
+              <button type="submit" class="btn btn-primary btn-icon">
+                <i class="fas fa-plus"></i> Ajouter
+              </button>
             </form>
           </div>
+        </div>
+        <!-- Formulaire d'ajout d'un texte -->
+        <div class="card mt-3">
+          <div class="card-header">
+            <i class="fas fa-plus-circle mr-2"></i>Ajouter un Texte
           </div>
+          <div class="card-body">
+            <form method="post">
+              <input type="hidden" name="action" value="add_texte">
+              <div class="form-group">
+                <label for="titre_texte">Titre du Texte</label>
+                <input type="text" id="titre_texte" name="titre_texte" class="form-control" required>
+              </div>
+              <div class="form-group">
+                <label for="contenu_texte">Contenu du Texte</label>
+                <textarea id="contenu_texte" name="contenu_texte" class="form-control" rows="5" required></textarea>
+              </div>
+              <div class="form-group">
+                <label for="sous_categorie_id">Sous-Catégorie</label>
+                <select id="sous_categorie_id" name="sous_categorie_id" class="form-control" required>
+                  {% for sous_categorie in sous_categories %}
+                    <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
+                  {% endfor %}
+                </select>
+              </div>
+              <button type="submit" class="btn btn-primary btn-icon">
+                <i class="fas fa-plus"></i> Ajouter
+              </button>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+  <!-- Scripts -->
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   <script>
     $(document).ready(function() {
+      // Gestion des boutons Modifier
       $(document).on('click', '.edit-button', function(e) {
         e.preventDefault();
+        const listItem = $(this).closest('li');
+        listItem.find('.editable').slideDown();
+        listItem.find('.display-mode').hide();
+        $(this).hide();
       });
+      // Gestion des boutons Annuler
       $(document).on('click', '.cancel-edit', function(e) {
         e.preventDefault();
+        const listItem = $(this).closest('li');
+        listItem.find('.editable').slideUp();
+        listItem.find('.display-mode').show();
+        listItem.find('.edit-button').show();
       });
+      // Animation pour les alertes
+      $('.alert').delay(4000).fadeOut(500);
+      // Confirmation personnalisée pour la suppression
+      $('form[method="post"]').on('submit', function(e) {
+        if ($(this).find('button[type="submit"]').hasClass('btn-danger')) {
           if (!confirm('Êtes-vous sûr de vouloir supprimer cet élément ?')) {
             e.preventDefault();
           }
         }
       });
     });
   </script>
 </body>