{{ define "timeline/fragments/newsletterForm" }}
  {{ $id := .Id }}
  {{ $variant := .Variant }}
  {{ if eq $variant "hero" }}
    <form
      class="flex gap-2 items-stretch w-full md:max-w-md mx-auto p-2 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded shadow-sm"
      hx-post="/newsletter/signup"
      hx-target="#newsletter-msg-{{ $id }}"
      hx-swap="outerHTML"
      hx-vals='{"target":"{{ $id }}"}'>
      <span id="newsletter-msg-{{ $id }}" class="flex gap-2 items-stretch flex-1 min-w-0">
        <input
          type="email"
          name="email"
          tabindex="4"
          required
          placeholder="Enter your email"
          class="py-2 w-full text-lg md:text-base" />
        <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit">
          Subscribe
          {{ i "arrow-right" "size-4" }}
        </button>
      </span>
    </form>
  {{ else }}
    <form
      hx-post="/newsletter/signup"
      hx-target="#newsletter-msg-{{ $id }}"
      hx-swap="outerHTML"
      hx-vals='{"target":"{{ $id }}"}'>
      <span id="newsletter-msg-{{ $id }}" class="flex items-stretch gap-2">
        <input
          type="email"
          name="email"
          placeholder="your@email.com"
          required
          class="flex-1 min-w-0 text-sm py-2" />
        <button type="submit" class="btn whitespace-nowrap px-4 gap-2">
          {{ i "mail-plus" "size-4 inline" }}
          Subscribe
        </button>
      </span>
    </form>
  {{ end }}
{{ end }}