{{ define "knots/fragments/knotListing" }}
  <div 
    id="knot-{{.Id}}"
    hx-swap-oob="true"
    class="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
    {{ block "listLeftSide" . }} {{ end }}
    {{ block "listRightSide" . }} {{ end }}
  </div>
{{ end }}

{{ define "listLeftSide" }}
  <div class="hover:no-underline flex items-center gap-2 min-w-0 max-w-[60%]">
    {{ i "hard-drive" "w-4 h-4" }}
    {{ if .Registered }}
      <a href="/knots/{{ .Domain }}">
        {{ .Domain }}
      </a>
    {{ else }}
      {{ .Domain }}
    {{ end }}
    <span class="text-gray-500">
      {{ template "repo/fragments/shortTimeAgo" .Created }}
    </span>
  </div>
{{ end }}

{{ define "listRightSide" }}
  <div id="right-side" class="flex gap-2">
    {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2 text-sm" }}
    {{ if .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" . }}
    {{ 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>
      {{ block "initializeButton" . }} {{ end }}
    {{ end }}
  </div>
{{ end }}

{{ define "initializeButton" }}
  <button
    class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center group"
    hx-post="/knots/{{ .Domain }}/init"
    hx-swap="none"
  >
    {{ i "square-play" "w-5 h-5" }}
    <span class="hidden md:inline">initialize</span>
    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
  </button>
{{ end }}