{{define "view"}}
<main class="flex flex-col items-center justify-center p-8">
  <div class="mb-4">You are now viewing the {{.Title}}</div>

  <div class="mb-2">
    Clicking the blue button will replace the entire page with an additional
    example view
  </div>
  <button
    hx-get="/example"
    class="p-2 mb-4 text-white bg-blue-400 rounded-md"
    hx-swap="outerHTML"
    hx-target="body"
  >
    Click Me 😀
  </button>
  <h1 class="mb-2 font-bold">
    Clicking the orange button will replace the content in the box below with
    the example API
  </h1>
  <button
    hx-get="/api/example"
    hx-swap="outerHTML"
    class="p-2 mb-2 text-white bg-orange-400 rounded-md"
    hx-target="#dynamic-content"
  >
    Click Me 😀
  </button>
  <div
    class="w-full max-w-md p-4 mb-6 text-center border-2 border-white border-solid rounded-md shadow-inner bg-bgPrimary"
  >
    <!-- Content loaded via HTMX will appear here -->
    <p id="dynamic-content" class="text-textPrimary">
      Dynamic content will be displayed here.
    </p>
  </div>
  <div class="space-y-2 text-center">
    <a href="/api/example" target="_blank" class="block text-blue-400"
      >You can still access traditional, json style api's</a
    >
    <a href="/example" class="block"
      >You can also create traditional route links</a
    >
  </div>
</main>
{{end}}