Change Primeagens contact book example into guestbook lmao

views/index.html

@@ -12,55 +12,41 @@
       {{ template "form" .Form }}
       <hr />
       {{ template "display" .Data }}
-
-      <script>
-        // allow 422 responses to swap as we are using this as a signal that
-        // a form was submitted with bad data and want to rerender with the errors
-        document.addEventListener("DOMContentLoaded", event => {
-          document.body.addEventListener("htmx:beforeSwap", evt => {
-            if (evt.detail.xhr.status === 422) {
-              evt.detail.shouldSwap = true;
-              evt.detail.isError = false;
-            }
-          })
-        })
-
-      </script>
   </body>
 </html>
 {{ end }}
 
 {{ block "form" . }}
-<form hx-swap="outerHTML" hx-post="/contacts">
-  name: <input 
+<form hx-swap="outerHTML" hx-post="/guestbook">
+  Name: <input 
     {{ if .Values.name }} value="{{ .Values.name }}" {{ end }} 
     type="text" name="name" />
-  email: <input
-    {{ if .Values.email }} value="{{ .Values.email }}" {{ end }} 
-    type="email" name="email" />
+  Message: <input
+    {{ if .Values.message }} value="{{ .Values.message }}" {{ end }} 
+    type="text" name="message" />
 
-    {{ if .Errors.email }}
-      <span style="color: red">{{ .Errors.email }}</span>
+    {{ if .Errors.message }}
+      <span style="color: red">{{ .Errors.message }}</span>
     {{ end }}
-  <button>Create contact</button>
+  <button>Sign guestbook</button>
 </form>
 {{ end }}
 
 {{ block "display" . }}
-<div id="contacts" style="display: flex; flex-direction: column">
-  {{ range .Contacts }}
-    {{ template "contact" . }}
+<div id="guestbook" style="display: flex; flex-direction: column">
+  {{ range .Entries }}
+    {{ template "entry" . }}
   {{ end }}
 </div>
 {{ end }}
 
-{{ block "contact" . }}
-  <div class="contact" id="contact-{{ .Id }}" style="display: flex;">
+{{ block "entry" . }}
+  <div class="entry" id="entry-{{ .Id }}" style="display: flex;">
     <div style="width: 1rem; cursor: pointer;"
-      hx-indicator="#contact-{{ .Id }}-indicator" 
-      hx-target="#contact-{{ .Id }}" 
+      hx-indicator="#entry-{{ .Id }}-indicator" 
+      hx-target="#entry-{{ .Id }}" 
       hx-swap="outerHTML swap:500ms" 
-      hx-delete="/contacts/{{ .Id }}" 
+      hx-delete="/guestbook/{{ .Id }}" 
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path fill="none" d="M0 0h24v24H0z"/>
@@ -68,16 +54,17 @@
       </svg>
     </div>
     Name: <span>{{ .Name }}</span>
-    Email: <span>{{ .Email }}</span>
+    Message: <span>{{ .Message }}</span>
 
-    <div id="contact-{{ .Id }}-indicator" class="htmx-indicator">
+    <div id="entry-{{ .Id }}-indicator" class="htmx-indicator">
       <img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
     </div>
   </div>
 {{ end }}
 
-{{ block "oob-contact" . }}
-  <div id="contacts" hx-swap-oob="afterbegin">
-    {{ template "contact" . }}
+{{ block "oob-entry" . }}
+  <div id="guestbook" hx-swap-oob="afterbegin">
+    {{ template "entry" . }}
   </div>
 {{ end }}
+