{{ define "repoContent" }}
    <header class="font-bold text-sm mb-4">COLLABORATORS</header>

    <div id="collaborator-list" class="flex flex-col gap-2 mb-2">
      {{ range .Collaborators }}
      <div id="collaborator" class="mb-2">
        <a href="/{{ didOrHandle .Did .Handle }}" class="no-underline hover:underline text-black">
          {{ didOrHandle .Did .Handle }}
        </a>
        <div>
          <span class="text-sm text-gray-500">
            {{ .Role }}
          </span>
        </div>
      </div>
      {{ end }}
    </div>

    {{ if .IsCollaboratorInviteAllowed }}
        <h3>add collaborator</h3>
        <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">
            <label for="collaborator">did or handle:</label>
            <input type="text" id="collaborator" name="collaborator" required />
            <button class="btn my-2" type="text">add collaborator</button>
        </form>
    {{ end }}
{{ end }}