{{ define "title" }}{{ .Tab }} settings{{ end }}

{{ define "content" }}
  <div class="p-6">
    <p class="text-xl font-bold dark:text-white">Settings</p>
  </div>
  <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
    <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="col-span-1">
        {{ template "user/settings/fragments/sidebar" . }}
      </div>
      <div class="col-span-1 md:col-span-3 flex flex-col gap-6">
        {{ template "knotsList" . }}
      </div>
    </section>
  </div>
{{ end }}

{{ define "knotsList" }}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
    <div class="col-span-1 md:col-span-2">
      <h2 class="text-sm pb-2 uppercase font-bold">Knots</h2>
      {{ block "about" . }} {{ end }}
    </div>
    <div class="col-span-1 md:col-span-1 md:justify-self-end">
      {{ template "docsButton" . }}
    </div>
  </div>

<section>
  <div class="flex flex-col gap-6">
    {{ 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="/settings/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 }}

{{ define "docsButton" }}
<a
class="btn flex items-center gap-2"
href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide">
{{ i "book" "size-4" }}
docs
</a>
<div
id="add-email-modal"
popover
class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
</div>
{{ end }}