{{ 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 "baseSettings" . }}
      {{ template "branchSettings" . }}
      {{ template "defaultLabelSettings" . }}
      {{ template "customLabelSettings" . }}
      {{ template "renameRepo" . }}
      {{ template "deleteRepo" . }}
      <div id="operation-error" class="text-red-500 dark:text-red-400"></div>
    </div>
  </section>
{{ end }}

{{ define "baseSettings" }}
  <form hx-put="/{{ $.RepoInfo.FullName }}/settings/base" hx-swap="none">
    <fieldset
      class=""
      {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}
    >
      <h2 class="text-lg pb-2 font-medium">Description</h2>
      <textarea
        rows="3"
        class="w-full mb-2"
        id="base-form-description"
        name="description"
        >{{ .RepoInfo.Description }}</textarea>
      <h2 class="text-lg pb-2 font-medium">Website URL</h2>
      <input
        type="text"
        class="w-full mb-2"
        id="base-form-website"
        name="website"
        value="{{ .RepoInfo.Website }}"
      >
      <h2 class="text-lg pb-2 font-medium">Topics</h2>
      <p class="text-gray-500 dark:text-gray-400">
        List of topics separated by spaces.
      </p>
      <textarea
        rows="2"
        class="w-full my-2"
        id="base-form-topics"
        name="topics"
      >{{ range $topic := .RepoInfo.Topics }}{{ $topic }} {{ end }}</textarea>
      <div id="repo-base-settings-error" class="text-red-500 dark:text-red-400"></div>
      <div class="flex justify-end pt-2">
        <button
          type="submit"
          class="btn-create flex items-center gap-2 group"
        >
          {{ i "save" "w-4 h-4" }}
          Save
          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
        </button>
      </div>
    </fieldset>
  </form>
{{ end }}

{{ define "branchSettings" }}
  <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">Default branch</h2>
      <p class="text-gray-500 dark:text-gray-400">
        The default branch is considered the “base” branch in your repository,
        against which all pull requests and code commits are automatically made,
        unless you specify a different branch.
      </p>
    </div>
    <form hx-put="/{{ $.RepoInfo.FullName }}/settings/branches/default" hx-swap="none" class="col-span-1 md:col-span-1 md:justify-self-end group flex gap-2 items-stretch">
      <select id="branch" name="branch" required class="p-1 max-w-64 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
        <option value="" disabled selected >
          Choose a default branch
        </option>
        {{ range .Branches }}
          <option value="{{ .Name }}" class="py-1" {{ if .IsDefault }}selected{{ end }} >
            {{ .Name }}
          </option>
        {{ end }}
      </select>
      <button class="btn flex gap-2 items-center" type="submit">
        {{ i "check" "size-4" }}
        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      </button>
    </form>
  </div>
{{ end }}

{{ define "defaultLabelSettings" }}
  <div class="flex flex-col gap-2">
    <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">Default labels</h2>
        <p class="text-gray-500 dark:text-gray-400">
          Manage your issues and pulls by creating labels to categorize them. Only
          repository owners may configure labels. You may choose to subscribe to
          default labels, or create entirely custom labels.
        <p>
      </div>
      <form class="col-span-1 md:col-span-1 md:justify-self-end">
        {{ $title := "Unsubscribe from all labels" }}
        {{ $icon := "x" }}
        {{ $text := "Unsubscribe all" }}
        {{ $action := "unsubscribe" }}
        {{ if $.ShouldSubscribeAll }}
          {{ $title = "Subscribe to all labels" }}
          {{ $icon = "check-check" }}
          {{ $text = "Subscribe all" }}
          {{ $action = "subscribe" }}
        {{ end }}
        {{ range .DefaultLabels }}
          <input type="hidden" name="label" value="{{ .AtUri.String }}">
        {{ end }}
        <button
          type="submit"
          title="{{$title}}" 
          class="btn flex items-center gap-2 group"
          hx-swap="none"
          hx-post="/{{ $.RepoInfo.FullName }}/settings/label/{{$action}}"
          {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}>
          {{ i $icon "size-4" }}
          {{ $text }}
          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
        </button>
      </form>
    </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 .DefaultLabels }}
        <div id="label-{{.Id}}" class="flex items-center justify-between p-2 pl-4">
          {{ template "repo/settings/fragments/labelListing" (list $ .) }}
          {{ $action := "subscribe" }}
          {{ $icon := "plus" }}
          {{ if mapContains $.SubscribedLabels .AtUri.String }}
            {{ $action = "unsubscribe" }}
            {{ $icon = "minus" }}
          {{ end }}
          <button
            class="btn gap-2 group"
            title="{{$action}} from label"
            {{ if not $.RepoInfo.Roles.IsOwner }}disabled{{ end }}
            hx-post="/{{ $.RepoInfo.FullName }}/settings/label/{{$action}}"
            hx-swap="none"
            hx-vals='{"label": "{{ .AtUri.String }}"}'>
            {{ i $icon "size-4" }}
            <span class="hidden md:inline">{{$action}}</span>
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
          </button>
        </div>
      {{ else }}
      <div class="flex items-center justify-center p-2 text-gray-500">
        No labels added yet
      </div>
      {{ end }}
    </div>
    <div id="default-label-operation" class="error"></div>
  </div>
{{ end }}

{{ define "customLabelSettings" }}
  <div class="flex flex-col gap-2">
    <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">Custom labels</h2>
      </div>
      <div class="col-span-1 md:col-span-1 md:justify-self-end">
        <button
          title="Add custom label"
          class="btn flex items-center gap-2"
          popovertarget="add-labeldef-modal"
          {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}
          popovertargetaction="toggle">
          {{ i "plus" "size-4" }}
          Add label
        </button>
        <div
          id="add-labeldef-modal"
          popover
          class="bg-white w-full sm:w-[30rem] dark:bg-gray-800 p-6 max-h-dvh overflow-y-auto 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 "repo/settings/fragments/addLabelDefModal" . }}
        </div>
      </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 .Labels }}
        <div id="label-{{.Id}}" class="flex items-center justify-between p-2 pl-4">
          {{ template "repo/settings/fragments/labelListing" (list $ .) }}
          {{ if $.RepoInfo.Roles.IsOwner }}
            <button
              class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
              title="Delete label"
              hx-delete="/{{ $.RepoInfo.FullName }}/settings/label"
              hx-swap="none"
              hx-vals='{"label-id": "{{ .Id }}"}'
              hx-confirm="Are you sure you want to delete the label `{{ .Name }}`?"
            >
              {{ i "trash-2" "w-5 h-5" }}
              <span class="hidden md:inline">Delete</span> 
              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
            </button>
          {{ end }}
        </div>
      {{ else }}
      <div class="flex items-center justify-center p-2 text-gray-500">
        No labels added yet
      </div>
      {{ end }}
    </div>
    <div id="label-operation" class="error"></div>
  </div>
{{ end }}

{{ define "renameRepo" }}
  {{ if and .RepoInfo.Roles.IsOwner .RepoInfo.RepoDid }}
  <form hx-post="/{{ $.RepoInfo.FullName }}/settings/rename" hx-swap="none" class="group">
    <h2 class="text-lg pb-2 font-medium">Rename repository</h2>
    <p class="text-gray-500 dark:text-gray-400 mb-2">
      Existing git remotes that use the old name will break. Use the
      stable, DID-based URLs below to avoid breakage on future renames.
    </p>
    {{ $knot := .RepoInfo.Knot }}
    {{ if eq $knot "knot1.tangled.sh" }}
        {{ $knot = "tangled.org" }}
    {{ end }}
    <ul class="text-gray-500 dark:text-gray-400 text-sm mb-2 font-mono">
      <li>https://{{ $knot }}/{{ .RepoInfo.RepoDid }}</li>
      <li>git@{{ $knot | stripPort }}:{{ .RepoInfo.RepoDid }}</li>
    </ul>
    <input
      type="text"
      class="w-full mb-2"
      id="rename-form-name"
      name="name"
      value="{{ .RepoInfo.Name }}"
      required
    >
    <div id="rename-repo-error" class="text-red-500 dark:text-red-400"></div>
    <div class="flex justify-end pt-2">
      <button
        type="submit"
        class="btn flex items-center gap-2"
      >
        {{ i "pencil" "w-4 h-4" }}
        Rename
        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      </button>
    </div>
  </form>
  {{ end }}
{{ end }}

{{ define "deleteRepo" }}
  {{ if .RepoInfo.Roles.RepoDeleteAllowed }}
  <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 text-red-500 dark:text-red-400 font-medium">Delete repository</h2>
      <p class="text-red-500 dark:text-red-400 ">
        Deleting a repository is irreversible and permanent. Be certain before deleting a repository.
      </p>
    </div>
    <div class="col-span-1 md:col-span-1 md:justify-self-end">
      <button 
        class="btn group text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex gap-2 items-center"  
        type="button"
        hx-swap="none"
        hx-delete="/{{ $.RepoInfo.FullName }}/settings/delete"
        hx-confirm="Are you sure you want to delete {{ $.RepoInfo.FullName }}?">
          {{ i "trash-2" "size-4" }}
          Delete
          <span class="ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline">
            {{ i "loader-circle" "w-4 h-4" }}
          </span>
      </button>
    </div>
  </div>
  {{ end }}
{{ end }}