{{ define "knots/fragments/addMemberModal" }}
  <button
    class="btn gap-2 group"
    title="Add member to this knot"
    popovertarget="add-member-{{ .Id }}"
    popovertargetaction="toggle"
  >
    {{ i "user-plus" "w-5 h-5" }}
    <span class="hidden md:inline">add member</span> 
    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
  </button>

  <div
    id="add-member-{{ .Id }}"
    popover
    class="
    bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50
    w-full md:w-96 p-4 rounded drop-shadow overflow-visible">
    {{ block "addKnotMemberPopover" . }} {{ end }}
  </div>
{{ end }}

{{ define "addKnotMemberPopover" }}
<form
  hx-post="/settings/knots/{{ .Domain }}/add"
  hx-indicator="#spinner"
  hx-swap="none"
  class="flex flex-col gap-2"
>
  <label for="member-did-{{ .Id }}" class="uppercase p-0">
    ADD MEMBER
  </label>
  <p class="text-sm text-gray-500 dark:text-gray-400">Members can create repositories and run workflows on this knot.</p>
  <actor-typeahead>
    <input
      autocapitalize="none"
      autocorrect="off"
      autocomplete="off"
      type="text"
      id="member-did-{{ .Id }}"
      name="member"
      required
      placeholder="user.tngl.sh"
      class="w-full"
    />
  </actor-typeahead>
  <div class="flex gap-2 pt-2">
    <button 
      type="button"
      popovertarget="add-member-{{ .Id }}"
      popovertargetaction="hide"
      class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
      >
      {{ i "x" "size-4" }} cancel
    </button>
    <button type="submit" class="btn w-1/2 flex items-center">
      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} add</span>
      <span id="spinner" class="group">
        {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      </span>
    </button>
  </div>
  <div id="add-member-error-{{ .Id }}" class="text-red-500 dark:text-red-400"></div>
</form>
{{ end }}