{{ define "title" }}knots{{ end }}

{{ define "content" }}
<div class="px-6 py-4">
  <h1 class="text-xl font-bold dark:text-white">Knots</h1>
</div>

<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
  <div class="flex flex-col gap-6">
    {{ template "knots/fragments/knotListingFull" . }}
    {{ block "register" . }} {{ end }}
  </div>
</section>
{{ end }}

{{ define "register" }}
  <section class="rounded max-w-2xl flex flex-col gap-2">
    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a knot</h2>
    <p class="mb-2 dark:text-gray-300">Enter the hostname of your knot to generate a key.</p>
    <form
      hx-post="/knots/key"
      class="space-y-4"
      hx-indicator="#register-button"
      hx-swap="none"
      >
      <div class="flex gap-2">
        <input
          type="text"
          id="domain"
          name="domain"
          placeholder="knot.example.com"
          required
          class="flex-1 w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-3 py-2 border rounded"
        >
        <button
          type="submit"
          id="register-button"
          class="btn rounded flex items-center py-2 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 group"
          >
          <span class="inline-flex items-center gap-2">
            {{ i "plus" "w-4 h-4" }}
            generate
          </span>
          <span class="pl-2 hidden group-[.htmx-request]:inline">
            {{ i "loader-circle" "w-4 h-4 animate-spin" }}
          </span>
        </button>
      </div>

      <div id="registration-error" class="error dark:text-red-400"></div>
    </form>

    <div id="secret"></div>
  </section>
{{ end }}