{{ define "timeline/fragments/newsletterWidget" }}
<div
  id="newsletter-widget"
  class="relative border border-green-800/15 dark:border-green-700 rounded bg-green-50 dark:bg-green-950 p-4 flex-1">
  <button
    type="button"
    onclick="
      document.getElementById('newsletter-widget').remove();
      localStorage.setItem('newsletter-dismissed', '1');
    "
    class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 leading-none text-sm"
    aria-label="Dismiss">
    ✕
  </button>
  <p class="text-green-900 dark:text-green-300 pr-6 mb-3">
    We've got a newsletter!
    <br />
    Punch in your email to subscribe.
  </p>
  <form
    hx-post="/newsletter/signup"
    hx-target="#newsletter-widget-msg"
    hx-swap="outerHTML">
    <span id="newsletter-widget-msg" class="flex items-center gap-2">
      <input
        type="email"
        name="email"
        placeholder="your@email.com"
        required
        class="flex-1 min-w-0 text-sm" />
      <button type="submit" class="btn whitespace-nowrap h-12 px-4 pb-0 gap-2">
        {{ i "mail-plus" "size-4 inline" }}
        subscribe
      </button>
    </span>
  </form>
</div>
<script>
  if (localStorage.getItem("newsletter-dismissed"))
    document.getElementById("newsletter-widget").remove();
</script>
{{ end }}