{{ block "index" . }}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Boanerbook</title>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              mono: ['IBM Plex Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
            },
            colors: {
              hacker: {
                green: '#00ff00',
                darkgreen: '#003300',
              },
            },
          },
        },
      }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body class="bg-black text-hacker-green font-mono min-h-screen py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto">
      <h1 class="text-3xl font-bold text-center mb-8">
        <span class="bg-hacker-green text-black px-2">Boanerbook</span>
      </h1>
      {{ template "form" .Form }}
      <hr class="my-8 border-t border-hacker-darkgreen" />
      {{ template "display" .Data }}
    </div>
  </body>
</html>
{{ end }}

{{ block "form" . }}
<form hx-swap="outerHTML" hx-post="/guestbook" class="border border-hacker-green p-6 mb-4">
  <div class="mb-4">
    <label class="block mb-2" for="name">
      Name:
    </label>
    <input 
      class="w-full py-2 px-3 bg-black border border-hacker-green focus:outline-none focus:ring-2 focus:ring-hacker-green"
      {{ if .Values.name }} value="{{ .Values.name }}" {{ end }} 
      type="text" name="name" id="name" placeholder="Your handle" />
  </div>
  <div class="mb-4">
    <label class="block mb-2" for="message">
      Message:
    </label>
    <input
      class="w-full py-2 px-3 bg-black border border-hacker-green focus:outline-none focus:ring-2 focus:ring-hacker-green"
      {{ if .Values.message }} value="{{ .Values.message }}" {{ end }} 
      type="text" name="message" id="message" placeholder="Your bonerfied ramblings" />
    {{ if .Errors.message }}
      <p class="text-red-500 text-xs mt-2">{{ .Errors.message }}</p>
    {{ end }}
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-hacker-green text-black font-bold py-2 px-4 focus:outline-none focus:shadow-outline hover:bg-hacker-darkgreen hover:text-hacker-green" type="submit">
      > Sign the great bonerbook
    </button>
  </div>
</form>
{{ end }}

{{ block "display" . }}
<div id="guestbook" class="space-y-4">
  {{ range .Entries }}
    {{ template "entry" . }}
  {{ end }}
</div>
{{ end }}

{{ block "entry" . }}
  <div class="entry border border-hacker-green p-4" id="entry-{{ .Id }}">
    <div class="flex justify-between items-center mb-2">
      <span class="font-bold text-lg">> {{ .Name }}</span>
      <button
        class="text-hacker-green hover:text-hacker-darkgreen"
        hx-indicator="#entry-{{ .Id }}-indicator" 
        hx-target="#entry-{{ .Id }}" 
        hx-swap="outerHTML swap:500ms" 
        hx-delete="/guestbook/{{ .Id }}" 
      >
        [DELETE]
      </button>
    </div>
    <p class="text-hacker-green">> {{ .Message }}</p>
    <div id="entry-{{ .Id }}-indicator" class="htmx-indicator flex justify-center mt-2">
      <svg class="animate-spin h-5 w-5 text-hacker-green" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </div>
  </div>
{{ end }}

{{ block "oob-entry" . }}
  <div id="guestbook" hx-swap-oob="afterbegin">
    {{ template "entry" . }}
  </div>
{{ end }}