Copy collection; Stimulus controller for vocabs (incomplete)

templates/bibliography/index.html.twig

@@ -7,6 +7,15 @@
     <h1 class="is-size-1 mt-0 has-text-centered">Bibliography</h1>
     <h2 class="is-size-3 mt-3 has-text-centered">{{ record.citation }}</h2>
 
+    {% for message in app.flashes('notice') %}
+        <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
+            {{ message }}
+        </div>
+    {% endfor %}
+
     <article class="message is-info mt-3">
         <div class="message-body">
             <p>

templates/bibliography/landing.html.twig

@@ -8,11 +8,14 @@
     <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
 
     {% for message in app.flashes('notice') %}
-        <div class=" mt-4 notification is-success">
-            <button class="delete"></button>
+        <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
             {{ message }}
         </div>
     {% endfor %}
+
     <div class="card p-5 mt-6 pt-6 pb-6">
         <div class="columns">
             <div class="column is-half has-text-centered">
@@ -100,12 +103,4 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" defer>
-    const delBtns = document.querySelectorAll('.delete');
-    for (let btn of delBtns) {
-        btn.addEventListener('click', function () {
-            this.parentElement.classList.add('is-hidden');
-        })
-    }
-</script>
 {% endblock %}