{{ define "title" }}knots{{ end }}
{{ define "content" }}
  <div class="p-6">
    <p class="text-xl font-bold dark:text-white">Knots</p>
  </div>
  <div class="flex flex-col">
    <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">register a knot</h2>
    <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
      <p class="mb-8 dark:text-gray-300">Generate a key to initialize your knot server.</p>
      <form 
        hx-post="/knots/key"
        class="max-w-2xl mb-8 space-y-4"
        hx-indicator="#generate-knot-key-spinner"
      >
        <input
          type="text"
          id="domain"
          name="domain"
          placeholder="knot.example.com"
          required
          class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
        >
        <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex items-center" type="submit">
          <span>generate key</span>
          <span id="generate-knot-key-spinner" class="group">
            {{ i "loader-circle" "pl-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
          </span>
        </button>
        <div id="settings-knots-error" class="error dark:text-red-400"></div>
      </form>
    </section>

    <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">my knots</h2>
    <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
      <div id="knots-list" class="flex flex-col gap-6 mb-8">
        {{ range .Registrations }}
          {{ if .Registered }}
          <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
            <div class="flex flex-col gap-1">
              <div class="inline-flex items-center gap-4">
                {{ i "git-branch" "w-3 h-3 dark:text-gray-300" }}
                <a href="/knots/{{ .Domain }}">
                  <p class="font-bold dark:text-white">{{ .Domain }}</p>
                </a>
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-400">owned by {{ .ByDid }}</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">registered {{ template "repo/fragments/time" .Registered }}</p>
            </div>
          </div>
          {{ end }}
        {{ else }}
          <p class="text-sm text-gray-500 dark:text-gray-400">No knots registered</p>
        {{ end }}
      </div>
    </section>

    <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">pending registrations</h2>
    <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
      <div id="pending-knots-list" class="flex flex-col gap-6 mb-8">
        {{ range .Registrations }}
          {{ if not .Registered }}
          <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
            <div class="flex flex-col gap-1">
              <div class="inline-flex items-center gap-4">
                <p class="font-bold dark:text-white">{{ .Domain }}</p>
                <div class="inline-flex items-center gap-1">
                  <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">
                    pending
                  </span>
                </div>
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-400">opened by {{ .ByDid }}</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">created {{ template "repo/fragments/time" .Created }}</p>
            </div>
            <div class="flex gap-2 items-center">
              <button
                class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center group"
                hx-post="/knots/{{ .Domain }}/init"
              >
                {{ i "square-play" "w-5 h-5" }}
                <span class="hidden md:inline">initialize</span>
                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
              </button>
            </div>
          </div>
          {{ end }}
        {{ else }}
          <p class="text-sm text-gray-500 dark:text-gray-400">No pending registrations</p>
        {{ end }}
      </div>
    </section>
  </div>
{{ end }}