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

{{ define "content" }}
<div class="px-6 py-4 flex items-center justify-between gap-4 align-bottom">
  <h1 class="text-xl font-bold dark:text-white">Knots</h1>
  <span class="flex items-center gap-1">
      {{ i "book" "w-3 h-3" }}
      <a href="https://tangled.org/@tangled.org/core/blob/master/docs/knot-hosting.md">docs</a>
  </span>
</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">
    {{ block "about" . }} {{ end }}
    {{ block "list" . }} {{ end }}
    {{ block "register" . }} {{ end }}
  </div>
</section>
{{ end }}

{{ define "about" }}
<section class="rounded">
    <p class="text-gray-500 dark:text-gray-400">
        Knots are lightweight headless servers that enable users to host Git repositories with ease.
        When creating a repository, you can choose a knot to store it on.
    </p>


</section>
{{ end }}

{{ define "list" }}
  <section class="rounded w-full flex flex-col gap-2">
    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your knots</h2>
    <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
      {{ range $registration := .Registrations }}
        {{ template "knots/fragments/knotListing" . }}
      {{ else }}
        <div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
          no knots registered yet
        </div>
      {{ end }}
    </div>
    <div id="operation-error" class="text-red-500 dark:text-red-400"></div>
  </section>
{{ end }}

{{ define "register" }}
  <section class="rounded w-full lg:w-fit 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 get started.</p>
    <form
      hx-post="/knots/register"
      class="max-w-2xl mb-2 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" }}
            register
          </span>
          <span class="pl-2 hidden group-[.htmx-request]:inline">
            {{ i "loader-circle" "w-4 h-4 animate-spin" }}
          </span>
        </button>
      </div>

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

  </section>
{{ end }}