{{ define "title" }}{{ .Registration.Domain }} · {{ .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 "knotDash" . }}
      </div>
    </section>
  </div>
{{ end }}

{{ define "knotDash" }}
<div>
  <div class="flex justify-between items-center">
    <h2 class="text-sm pb-2 uppercase font-bold">{{ .Tab }} &middot; {{ .Registration.Domain }}</h2>
    <div id="right-side" class="flex gap-2">
      {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2" }}
      {{ $isOwner := and .LoggedInUser (eq .LoggedInUser.Did .Registration.ByDid)  }}
      {{ if .Registration.IsRegistered }}
        <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
        {{ if $isOwner }}
          {{ template "knots/fragments/addMemberModal" .Registration }}
        {{ end }}
      {{ else if .Registration.IsReadOnly }}
        <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 {{$style}}">
          {{ i "shield-alert" "w-4 h-4" }} read-only
        </span>
        {{ if $isOwner }}
          {{ block "retryButton" .Registration }} {{ end }}
        {{ end }}
      {{ else }}
        <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} unverified</span>
        {{ if $isOwner }}
          {{ block "retryButton" .Registration }} {{ end }}
        {{ end }}
      {{ end }}

      {{ if $isOwner }}
        {{ block "deleteButton" .Registration }} {{ end }}
      {{ end }}
    </div>
  </div>
  <div id="operation-error" class="dark:text-red-400"></div>
</div>

{{ if .Members }}
  <section class="bg-white dark:bg-gray-800 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
    <div class="flex flex-col gap-2">
      {{ block "member" . }} {{ end }}
    </div>
  </section>
{{ end }}
{{ end }}


{{ define "member" }}
  {{ range .Members }}
    <div>
      <div class="flex justify-between items-center">
        <div class="flex items-center gap-2">
          {{ template "user/fragments/picHandleLink" . }}
          <span class="ml-2 font-mono text-gray-500">{{.}}</span>
        </div>
        {{ if ne $.LoggedInUser.Did . }}
          {{ block "removeMemberButton" (list $ . ) }} {{ end }}
        {{ end }}
      </div>
      <div class="ml-2 pl-2 pt-2 border-l border-gray-200 dark:border-gray-700">
        {{ $repos := index $.Repos . }}
        {{ range $repos }}
          <div class="flex gap-2 items-center">
            {{ i "book-marked" "size-4" }}
            <a href="/{{ resolve .Did }}/{{ .Name }}">
              {{ .Name }}
            </a>
          </div>
        {{ else }}
          <div class="text-gray-500 dark:text-gray-400">
            No repositories configured yet.
          </div>
        {{ end }}
      </div>
    </div>
  {{ end }}
{{ end }}

{{ define "deleteButton" }}
  <button
    class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
    title="Delete knot"
    hx-delete="/settings/knots/{{ .Domain }}"
    hx-swap="outerHTML"
    hx-confirm="Are you sure you want to delete the knot '{{ .Domain }}'?"
    hx-headers='{"shouldRedirect": "true"}'
  >
    {{ 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 }}


{{ define "retryButton" }}
  <button
    class="btn gap-2 group"
    title="Retry knot verification"
    hx-post="/settings/knots/{{ .Domain }}/retry"
    hx-swap="none"
    hx-headers='{"shouldRefresh": "true"}'
  >
    {{ i "rotate-ccw" "w-5 h-5" }}
    <span class="hidden md:inline">retry</span> 
    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
  </button>
{{ end }}


{{ define "removeMemberButton" }}
  {{ $root := index . 0 }}
  {{ $member := index . 1 }}
  {{ $memberHandle := resolve $member }}
    <button
      class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
      title="Remove member"
      hx-post="/settings/knots/{{ $root.Registration.Domain }}/remove"
      hx-swap="none"
      hx-vals='{"member": "{{$member}}" }'
      hx-confirm="Are you sure you want to remove {{ $memberHandle }} from this knot?"
    >
      {{ i "user-minus" "w-4 h-4" }}
      remove
      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
    </button>
{{ end }}