{{ define "title" }}{{ .Registration.Domain }}{{ end }}

{{ define "content" }}
  <div class="px-6 py-4">
    <div class="flex justify-between items-center">
      <div id="left-side" class="flex gap-2 items-center">
        <h1 class="text-xl font-bold dark:text-white">
          {{ .Registration.Domain }}
        </h1>
        <span class="text-gray-500 text-base">
          {{ template "repo/fragments/shortTimeAgo" .Registration.Created }}
        </span>
      </div>
      <div id="right-side" class="flex gap-2">
        {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2" }}
        {{ if .Registration.Registered }}
          <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>
          {{ template "knots/fragments/addMemberModal" .Registration }}
        {{ 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" }} pending</span>
        {{ end }}
      </div>
    </div>
    <div id="operation-error" class="dark:text-red-400"></div>
  </div>

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

{{ define "knotMember" }}
  {{ range .Members }}
    <div>
      <div class="flex justify-between items-center">
        <div class="flex items-center gap-2">
          {{ i "user" "size-4" }}
          {{ $user := index $.DidHandleMap . }}
          <a href="/{{ $user }}">{{ $user }} <span class="ml-2 font-mono text-gray-500">{{.}}</span></a>
        </div>
      </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="/{{ .Did }}/{{ .Name }}">
              {{ .Name }}
            </a>
          </div>
        {{ else }}
          <div class="text-gray-500 dark:text-gray-400">
            No repositories created yet.
          </div>
        {{ end }}
      </div>
    </div>
  {{ end }}
{{ end }}