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

{{ define "content" }}
  <div class="p-6">
    <p class="text-xl font-bold dark:text-white">{{ .Registration.Domain }}</p>
  </div>
  
  <div class="flex flex-col">
    {{ block "registration-info" . }} {{ end }}
    {{ block "members" . }} {{ end }}
    {{ block "add-member" . }} {{ end }}
  </div>
{{ end }}

{{ define "registration-info" }}
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
  <dl class="grid grid-cols-[auto_1fr] gap-x-4 dark:text-gray-200">
    <dt class="font-bold">opened by</dt>
    <dd>
      <span>
        {{ index $.DidHandleMap .Registration.ByDid }} <span class="text-gray-500 dark:text-gray-400 font-mono">{{ .Registration.ByDid }}</span>
      </span>
      {{ if eq $.LoggedInUser.Did $.Registration.ByDid }}
        <span class="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded ml-2">you</span>
      {{ end }}
    </dd>
    
    <dt class="font-bold">opened</dt>
    <dd>{{ .Registration.Created | timeFmt }}</dd>
    
    {{ if .Registration.Registered }}
      <dt class="font-bold">registered</dt>
      <dd>{{ .Registration.Registered | timeFmt }}</dd>
    {{ else }}
      <dt class="font-bold">status</dt>
      <dd class="text-yellow-800 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-900 rounded px-2 py-1 inline-block">
        Pending Registration
      </dd>
    {{ end }}
  </dl>
  
  {{ if not .Registration.Registered }}
    <div class="mt-4">
      <button 
        class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" 
        hx-post="/knots/{{.Domain}}/init" 
        hx-swap="none">
        Initialize Registration
      </button>
    </div>
  {{ end }}
</section>
{{ end }}

{{ define "members" }}
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">members</h2>
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
  {{ if .Registration.Registered }}
    <div id="member-list" class="flex flex-col gap-4">
      {{ range $.Members }}
        <div class="inline-flex items-center gap-4">
          {{ i "user" "w-4 h-4 dark:text-gray-300" }}
          <a href="/{{index $.DidHandleMap .}}" class="text-gray-900 dark:text-white">{{index $.DidHandleMap .}} 
            <span class="text-gray-500 dark:text-gray-400 font-mono">{{.}}</span>
          </a>
        </div>
      {{ else }}
        <p class="text-gray-500 dark:text-gray-400">No members have been added yet.</p>
      {{ end }}
    </div>
  {{ else }}
    <p class="text-gray-500 dark:text-gray-400">Members can be added after registration is complete.</p>
  {{ end }}
</section>
{{ end }}

{{ define "add-member" }}
{{ if $.IsOwner }}
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">add member</h2>
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
  <form 
    hx-put="/knots/{{.Registration.Domain}}/member"
    class="max-w-2xl space-y-4">
    <input
      type="text"
      id="subject"
      name="subject"
      placeholder="did or handle"
      required
      class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>

    <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add member</button>

    <div id="add-member-error" class="error dark:text-red-400"></div>
  </form>
</section>
{{ end }}
{{ end }}