{{ define "title" }}{{ .Tab | capitalize }} settings · {{ .RepoInfo.FullName }} · Tangled{{ end }}

{{ define "repoContent" }}
  <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
    <div class="col-span-1">
      {{ template "repo/settings/fragments/sidebar" . }}
    </div>
    <div class="col-span-1 md:col-span-3 flex flex-col gap-6 p-2">
      {{ template "spindleSettings" . }}
      {{ if $.CurrentSpindle }}
        {{ template "secretSettings" . }}
      {{ end }}
      <div id="operation-error" class="text-red-500 dark:text-red-400"></div>
    </div>
  </section>
{{ end }}

{{ define "spindleSettings" }}
  <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>
      <p class="text-gray-500 dark:text-gray-400">
        The spindle to execute your workflows on; leave it empty to disable
        pipelines. Its operator has to have allowed you as a member, otherwise
        it will ignore this repository. Only repository owners can configure
        spindles. Spindles can be selfhosted,
        <a class="text-gray-500 dark:text-gray-400 underline" href="https://docs.tangled.org/spindles.html#self-hosting-guide">
          click to learn more.
        </a>
      </p>
    </div>
    {{ if not $.RepoInfo.Roles.IsOwner }}
      <div class="col-span-1 md:col-span-1 md:justify-self-end group flex gap-2 items-stretch">
        {{ or $.CurrentSpindle "No spindle configured" }}
      </div>
    {{ else }}
      <form hx-post="/{{ $.RepoInfo.FullName }}/settings/spindle" class="col-span-1 md:col-span-1 md:justify-self-end group flex gap-2 items-stretch">
        {{ template "repo/fragments/spindleInput"
          (dict "Spindles" $.Spindles "Current" $.CurrentSpindle "Class" "p-1 max-w-64") }}
        <button class="btn flex gap-2 items-center" type="submit" {{ if not $.RepoInfo.Roles.IsOwner }}disabled{{ end }}>
          {{ i "check" "size-4" }}
          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
        </button>
      </form>
    {{ end }}
  </div>
{{ end }}

{{ define "secretSettings" }}
  <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">Secrets</h2>
      <p class="text-gray-500 dark:text-gray-400">
      Secrets are accessible in workflow runs via environment variables. Anyone
      with collaborator access to this repository can add and use secrets in
      workflow runs.
      </p>
    </div>
    <div class="col-span-1 md:col-span-1 md:justify-self-end">
      {{ template "addSecretButton" . }}
    </div>
  </div>
  <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700 w-full">
    {{ range .Secrets }}
      {{ template "repo/settings/fragments/secretListing" (list $ .) }}
    {{ else }}
      <div class="flex items-center justify-center p-2 text-gray-500">
        No secrets added yet
      </div>
    {{ end }}
  </div>
{{ end }}

{{ define "addSecretButton" }}
  <button
    class="btn flex items-center gap-2"
    popovertarget="add-secret-modal"
    popovertargetaction="toggle">
    {{ i "plus" "size-4" }}
    Add secret
  </button>
  <div
    id="add-secret-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">
    {{ template "addSecretModal" . }}
  </div>
{{ end}}

{{ define "addSecretModal" }}
<form
  autocomplete="off"
  hx-put="/{{ $.RepoInfo.FullName }}/settings/secrets"
  hx-indicator="#spinner"
  hx-swap="none"
  class="flex flex-col gap-2"
>
  <p class="text-lg font-medium p-0">Add secret</p>
  <p class="text-sm text-gray-500 dark:text-gray-400">Secrets are available as environment variables in the workflow.</p>
  <input
    type="text"
    id="secret-key"
    name="key"
    required
    placeholder="SECRET_NAME"
  />
  <textarea
    type="text"
    id="secret-value"
    name="value"
    required
    placeholder="Secret value"></textarea>
  <div class="flex gap-2 pt-2">
    <button
      type="button"
      popovertarget="add-secret-modal"
      popovertargetaction="hide"
      class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
      >
      {{ i "x" "size-4" }} Cancel
    </button>
    <button type="submit" class="btn w-1/2 flex items-center">
      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} Add</span>
      <span id="spinner" class="group">
        {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      </span>
    </button>
  </div>
  <div id="add-secret-error" class="text-red-500 dark:text-red-400"></div>
</form>
{{ end }}