Makes error popup work

src/clj/auto_ap/ssr/components/page.clj

@@ -1,7 +1,9 @@
 (ns auto-ap.ssr.components.page
   (:require
    [auto-ap.ssr.components.aside :refer [left-aside-]]
-   [auto-ap.ssr.components.navbar :refer [navbar-]]))
+   [auto-ap.ssr.components.navbar :refer [navbar-]]
+   [hiccup2.core :as hiccup]
+   [auto-ap.ssr.svg :as svg]))
 
 (defn page- [{:keys [nav page-specific active-client identity app-params] :or {app-params {}}} & children]
   [:div#app app-params
@@ -10,7 +12,26 @@
    [:div.flex.pt-16.overflow-hidden
     (left-aside- {:nav nav
                   :page-specific page-specific})
-    [:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "}
+    [:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "
+                        "_" (hiccup/raw "on htmx:responseError put event.detail.xhr.response into #error-details then add .htmx-added to #error-holder then remove .hidden from #error-holder then wait 10ms then remove .htmx-added from #error-holder")}
+     [:div#error-holder.hidden
+      [:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
+       [:div.relative 
+        [:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
+         {"_" (hiccup/raw "on click add .hidden to #error-holder")}
+         svg/filled-x
+         ]
+        ]
+       [:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96
+        
+
+        [:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
+         [:div.inline-block.w-8.h-8.mr-2 svg/alert]
+         [:span.font-medium "Oh, drat! An unexpected error has occurred."]
+         [:div.text-sm
+          [:p "Integreat staff have been notified and are looking into it. " ]
+          [:p "To see error details, " [:a.underline {:href "#" :data-collapse-toggle "error-details"} "click here"] "."]
+          [:pre#error-details.text-xs.hidden]]]]]]
      (into 
        [:div.p-4]
        children)]]