{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}

{{ define "content" }}
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
  <div class="lg:col-span-1">
    {{ block "profileCard" . }} {{ end }}
  </div>

  <div class="lg:col-span-3">
    {{ block "ownRepos" . }} {{ end }}
    {{ block "collaboratingRepos" . }} {{ end }}
  </div>
</div>
{{ end }}

{{ define "profileCard" }}
<div class="bg-white px-6 py-4 rounded drop-shadow-sm max-h-fit">
  <div class="flex justify-center items-center">
    {{ if .AvatarUri }}
    <img class="w-1/2 lg:w-full rounded-full p-2" src="{{ .AvatarUri }}" />
    {{ end }}
  </div>
  <p class="text-xl font-bold text-center">
  {{ didOrHandle .UserDid .UserHandle }}
  </p>
  <div class="text-sm text-center">
    <span>{{ .ProfileStats.Followers }} followers</span>
    <div class="inline-block px-1 select-none after:content-['·']"></div>
    <span>{{ .ProfileStats.Following }} following</span>
  </div>

  {{ if ne .FollowStatus.String "IsSelf" }}
  <button id="followBtn"
          class="btn mt-2 w-full"
          {{ if eq .FollowStatus.String "IsNotFollowing" }}
          hx-post="/follow?subject={{.UserDid}}"
          {{ else }}
          hx-delete="/follow?subject={{.UserDid}}"
          {{ end }}
          hx-trigger="click"
          hx-target="#followBtn"
          hx-swap="outerHTML"
          >
          {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}
  </button>
    {{ end }}
</div>
{{ end }}

{{ define "ownRepos" }}
<p class="text-sm font-bold py-2 px-6">REPOS</p>
<div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
  {{ range .Repos }}
  <div
      id="repo-card"
      class="py-4 px-6 drop-shadow-sm rounded bg-white"
      >
      <div id="repo-card-name" class="font-medium">
        <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
          >{{ .Name }}</a
        >
      </div>
          <div
              id="repo-knot-name"
              class="text-gray-600 text-sm font-mono"
              >
              {{ .Knot }}
          </div>
  </div>
    {{ else }}
    <p class="px-6">This user does not have any repos yet.</p>
    {{ end }}
</div>
{{ end }}

{{ define "collaboratingRepos" }}
<p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p>
<div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
  {{ range .CollaboratingRepos }}
  <div
      id="repo-card"
      class="py-4 px-6 drop-shadow-sm rounded bg-white"
      >
      <div id="repo-card-name" class="font-medium">
        <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">
          {{ index $.DidHandleMap .Did }}/{{ .Name }}
        </a>
      </div>
      <div
          id="repo-knot-name"
          class="text-gray-600 text-sm font-mono"
          >
          {{ .Knot }}
      </div>
  </div>
  {{ else }}
  <p class="px-6">This user is not collaborating.</p>
  {{ end }}
</div>
{{ end }}