On utilise un modal pour supprimer le vote

shared/templates/base.html

@@ -45,14 +45,43 @@
         });
       });
 
+      // Interact with modals
+      var $modals = document.querySelectorAll('.modal') || [];
+      var $modalButtons = document.querySelectorAll('.modal-button') || [];
+      var $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close') || [];
+
+      $modalButtons.forEach(function($el) {
+        $el.addEventListener('click', function() {
+          var target = $el.dataset.target;
+          var $target = document.getElementById(target);
+          document.documentElement.classList.add('is-clipped');
+          $target.classList.add('is-active');
+        });
+      });
+
+      $modalCloses.forEach(function($el) {
+        $el.addEventListener('click', (event) => {
+          event.stopPropagation();
+          document.documentElement.classList.remove('is-clipped');
+          $modals.forEach(function($el) {
+            $el.classList.remove('is-active');
+          });
+        });
+      });
+
       document.addEventListener('keydown', (event) => {
         var e = event || window.event;
         if (e.keyCode === 27) {
           $dropdowns.forEach(($dropdown) => {
             $dropdown.classList.remove('is-active');
           });
+          document.documentElement.classList.remove('is-clipped');
+          $modals.forEach(function($el) {
+            $el.classList.remove('is-active');
+          });
         }
       });
+
     });
 
   </script>

shared/templates/forms/modal-form.html

@@ -0,0 +1,35 @@
+{% load i18n %}
+
+<div class="modal" id="modal-{{ modal_id }}">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <form method="post" action="{{ post_url }}">
+      {% csrf_token %}
+
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ modal_title }}</p>
+        <a class="delete" aria-label="close"></a>
+      </header>
+
+      <section class="modal-card-body">
+        {% include "forms/form.html" %}
+      </section>
+
+      <footer class="modal-card-foot">
+        <button class="button is-fullwidth is-outlined is-primary is-light">
+          <span class="icon is-small">
+            <i class="fas fa-check"></i>
+          </span>
+          <span>{% trans "Enregistrer" %}</span>
+        </button>
+
+        <a class="button is-primary button-close">
+          <span class="icon is-small">
+            <i class="fas fa-undo-alt"></i>
+          </span>
+          <span>{% trans "Annuler" %}</span>
+        </a>
+      </footer>
+    </form>
+  </div>
+</div>