{{ define "title" }}{{ .Tab | capitalize }} · Tangled{{ 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-lg pb-2 font-medium">Spindle</h2>
    <section class="rounded flex items-center gap-2">
      <p class="text-gray-500 dark:text-gray-400">
        Spindles are small CI runners.
      </p>
    </section>
  </div>
  <div class="col-span-1 md:col-span-1 md:justify-self-end">
    <a href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="btn flex items-center gap-2">
      {{ i "book" "size-4" }}
      Docs
    </a>
  </div>
</div>

<section>
  <div class="flex flex-col gap-6">
  </div>
</section>
{{ end }}