Use hyperscript for rendering notifications

templates/base.html

@@ -150,17 +150,12 @@
     </div>
 
     <div class="absolute top-16 right-4 m-4">
-
         <div class="bg-white rounded shadow-md w-64" id="notifications-container">
 
         </div>
-
     </div>
-    <script type="text/javascript">
-        const displayNotification = (message) => {
-            const notifications_container_el = document.getElementById('notifications-container');
-
-            const notificiation_html = `<div class="bg-white rounded shadow-md w-64">
+    <template id="notification-template">
+        <div class="bg-white rounded shadow-md w-64" _="init wait 2s then remove me end on click remove me">
             <div class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
                 role="alert">
                 <div
@@ -187,28 +182,8 @@
                     </svg>
                 </button>
             </div>
-        </div>`
-
-            createAndRemoveElement(notificiation_html, notifications_container_el, 3);
-        }
-
-        const createAndRemoveElement = (html, parentElement, delay) => {
-            // Create new element
-            var newElement = document.createElement('div');
-            newElement.innerHTML = html;
-
-            // Add click handler that deletes the element
-            newElement.addEventListener('click', function () {
-                newElement.parentNode.removeChild(newElement);
-            });
-
-            // Add the new element to the DOM
-            parentElement.appendChild(newElement);
-
-            // Remove the new element after 'delay' seconds
-            setTimeout(() => newElement?.parentNode?.removeChild(newElement), delay * 1000); // Convert delay from seconds to milliseconds
-        }
-    </script>
+        </div>
+    </template>
 
     <script src="/static/js/htmx.min.js"></script>
     <script src="/static/js/hyperscript.min.js"></script>