{{ 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 "spindleList" . }}
      </div>
    </section>
  </div>
{{ end }}

{{ define "spindleList" }}
<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">Spindle</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 flex items-center gap-2">
  <p class="text-gray-500 dark:text-gray-400">
    Spindles are small CI runners.
  </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 spindles</h2>
  <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
    {{ range $spindle := .Spindles }}
    {{ template "spindles/fragments/spindleListing" . }}
    {{ else }}
    <div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
      no spindles 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 spindle</h2>
  <p class="mb-2 dark:text-gray-300">Enter the hostname of your spindle to get started.</p>
  <form
  hx-post="/settings/spindles/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="instance"
    name="instance"
    placeholder="spindle.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="dark:text-red-400"></div>
</form>

</section>
{{ end }}

{{ define "docsButton" }}
<a
class="btn flex items-center gap-2"
href="https://docs.tangled.org/spindles.html#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 }}