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

{{ define "content" }}
<div class="grid grid-cols-1 md:grid-cols-5 gap-6">
    <div class="md:col-span-1 order-1 md:order-1">
        {{ block "profileCard" . }}{{ end }}
    </div>
    <div class="md:col-span-2 order-2 md:order-2">
        {{ block "ownRepos" . }}{{ end }}
        {{ block "collaboratingRepos" . }}{{ end }}
    </div>
    <div class="md:col-span-2 order-3 md:order-3">
        {{ block "profileTimeline" . }}{{ end }}
    </div>
</div>
{{ end }}

{{ define "profileTimeline" }}
  <p class="text-sm font-bold py-2 dark:text-white px-6">ACTIVITY</p>
  <div class="flex flex-col gap-6 relative">
    {{ with .ProfileTimeline }}
      {{ range $idx, $byMonth := .ByMonth }}
        {{ with $byMonth }}
        <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm">
          {{ if eq $idx 0 }}

          {{ else }}
            {{ $s := "s" }}
            {{ if eq $idx 1 }}
              {{ $s = "" }}
            {{ end }}
            <p class="text-sm font-bold dark:text-white mb-2">{{$idx}} month{{$s}} ago</p>
          {{ end }}

          {{ if .IsEmpty }}
            <div class="text-gray-500 dark:text-gray-400">
              No activity for this month
            </div>
          {{ else }}
            <div class="flex flex-col gap-1">
              {{ block "repoEvents"  (list .RepoEvents  $.DidHandleMap) }} {{ end }}
              {{ block "issueEvents" (list .IssueEvents $.DidHandleMap) }} {{ end }}
              {{ block "pullEvents"  (list .PullEvents  $.DidHandleMap) }} {{ end }}
            </div>
          {{ end }}
        </div>

        {{ end }}
      {{ else }}
        <p class="dark:text-white">This user does not have any activity yet.</p>
      {{ end }}
    {{ end }}
  </div>
{{ end }}

{{ define "repoEvents" }}
  {{ $items := index . 0 }}
  {{ $handleMap := index . 1 }}

  {{ if gt (len $items) 0 }}
    <details>
      <summary class="list-none cursor-pointer hover:text-gray-500 hover:dark:text-gray-400">
        <div class="flex flex-wrap items-center gap-2">
          {{ i "book-plus" "w-4 h-4" }}
          created {{ len $items }} {{if eq (len $items) 1 }}repository{{else}}repositories{{end}}
        </div>
      </summary>
      <div class="py-2 text-sm flex flex-col gap-3 mb-2">
        {{ range $items }}
          <div class="flex flex-wrap items-center gap-2">
            <span class="text-gray-500 dark:text-gray-400">
              {{ if .Source }}
                {{ i "git-fork" "w-4 h-4" }}
              {{ else }}
                {{ i "book-plus" "w-4 h-4" }}
              {{ end }}
            </span>
            <a href="/{{ index $handleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">
              {{- .Repo.Name -}}
            </a>
          </div>
        {{ end }}
      </div>
    </details>
  {{ end }}
{{ end }}

{{ define "issueEvents" }}
  {{ $i := index . 0 }}
  {{ $items := $i.Items }}
  {{ $stats := $i.Stats }}
  {{ $handleMap := index . 1 }}

  {{ if gt (len $items) 0 }}
    <details>
      <summary class="list-none cursor-pointer hover:text-gray-500 hover:dark:text-gray-400">
        <div class="flex flex-wrap items-center gap-2">
          {{ i "circle-dot" "w-4 h-4" }}

          <div>
            created {{ len $items }} {{if eq (len $items) 1 }}issue{{else}}issues{{end}} 
          </div>

          {{ if gt $stats.Open 0 }}
            <span class="px-2 py-1/2 text-sm rounded text-white bg-green-600 dark:bg-green-700">
              {{$stats.Open}} open
            </span>
          {{ end }}

          {{ if gt $stats.Closed 0 }}
          <span class="px-2 py-1/2 text-sm rounded text-white bg-gray-800 dark:bg-gray-700">
            {{$stats.Closed}} closed
          </span>
          {{ end }}

        </div>
      </summary>
      <div class="py-2 text-sm flex flex-col gap-3 mb-2">
        {{ range $items }}
          {{ $repoOwner := index $handleMap .Metadata.Repo.Did }}
          {{ $repoName := .Metadata.Repo.Name }}
          {{ $repoUrl := printf "%s/%s" $repoOwner $repoName }}

          <div class="flex gap-2 text-gray-600 dark:text-gray-300">
            {{ if .Open }}
              <span class="text-green-600 dark:text-green-500">
                {{ i "circle-dot" "w-4 h-4" }}
              </span>
            {{ else }}
              <span class="text-gray-500 dark:text-gray-400">
                {{ i "ban" "w-4 h-4" }}
              </span>
            {{ end }}
            <div class="flex-none min-w-8 text-right">
              <span class="text-gray-500 dark:text-gray-400">#{{ .IssueId }}</span>
            </div>
            <div class="break-words max-w-full">
              <a href="/{{$repoUrl}}/issues/{{ .IssueId }}" class="no-underline hover:underline">
                {{ .Title -}}
              </a>
              on
              <a href="/{{$repoUrl}}" class="no-underline hover:underline whitespace-nowrap">
                {{$repoUrl}}
              </a>
            </div>
          </div>
        {{ end }}
      </div>
    </details>
  {{ end }}
{{ end }}

{{ define "pullEvents" }}
  {{ $i := index . 0 }}
  {{ $items := $i.Items }}
  {{ $stats := $i.Stats }}
  {{ $handleMap := index . 1 }}
  {{ if gt (len $items) 0 }}
    <details>
      <summary class="list-none cursor-pointer hover:text-gray-500 hover:dark:text-gray-400">
        <div class="flex flex-wrap items-center gap-2">
          {{ i "git-pull-request" "w-4 h-4" }}

          <div>
            created {{ len $items }} {{if eq (len $items) 1 }}pull request{{else}}pull requests{{end}} 
          </div>

          {{ if gt $stats.Open 0 }}
            <span class="px-2 py-1/2 text-sm rounded text-white bg-green-600 dark:bg-green-700">
              {{$stats.Open}} open
            </span>
          {{ end }}

          {{ if gt $stats.Merged 0 }}
            <span class="px-2 py-1/2 text-sm rounded text-white bg-purple-600 dark:bg-purple-700">
              {{$stats.Merged}} merged
            </span>
          {{ end }}


          {{ if gt $stats.Closed 0 }}
          <span class="px-2 py-1/2 text-sm rounded text-black dark:text-white bg-gray-50 dark:bg-gray-700 ">
            {{$stats.Closed}} closed
          </span>
          {{ end }}

        </div>
      </summary>
      <div class="py-2 text-sm flex flex-col gap-3 mb-2">
        {{ range $items }}
          {{ $repoOwner := index $handleMap .Repo.Did }}
          {{ $repoName := .Repo.Name }}
          {{ $repoUrl := printf "%s/%s" $repoOwner $repoName }}

          <div class="flex gap-2 text-gray-600 dark:text-gray-300">
            {{ if .State.IsOpen }}
              <span class="text-green-600 dark:text-green-500">
                {{ i "git-pull-request" "w-4 h-4" }}
              </span>
            {{ else if .State.IsMerged }}
              <span class="text-purple-600 dark:text-purple-500">
                {{ i "git-merge" "w-4 h-4" }}
              </span>
            {{ else }}
              <span class="text-gray-600 dark:text-gray-300">
                {{ i "git-pull-request-closed" "w-4 h-4" }}
              </span>
            {{ end }}
            <div class="flex-none min-w-8 text-right">
              <span class="text-gray-500 dark:text-gray-400">#{{ .PullId }}</span>
            </div>
            <div class="break-words max-w-full">
              <a href="/{{$repoUrl}}/pulls/{{ .PullId }}" class="no-underline hover:underline">
                {{ .Title -}}
              </a>
              on
              <a href="/{{$repoUrl}}" class="no-underline hover:underline whitespace-nowrap">
                {{$repoUrl}}
              </a>
            </div>
          </div>
        {{ end }}
      </div>
    </details>
  {{ end }}
{{ end }}

{{ define "profileCard" }}
    <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm max-h-fit">
        <div class="flex justify-center items-center">
            {{ if .AvatarUri }}
                <img class="w-3/4 rounded-full p-2" src="{{ .AvatarUri }}" />
            {{ end }}
        </div>
        <p 
          title="{{ didOrHandle .UserDid .UserHandle }}"
          class="text-lg font-bold text-center dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full"
          >
          {{ didOrHandle .UserDid .UserHandle }}
        </p>
        <div class="text-sm text-center dark:text-gray-300">
            <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" }}
            {{ template "user/fragments/follow" . }}
        {{ end }}
    </div>
{{ end }}

{{ define "ownRepos" }}
    <p class="text-sm font-bold py-2 px-6 dark:text-white">REPOS</p>
    <div id="repos" class="grid grid-cols-1 gap-4 mb-6">
        {{ range .Repos }}
            <div
                id="repo-card"
                class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800"
            >
                <div id="repo-card-name" class="font-medium dark:text-white">
                    <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
                        >{{ .Name }}</a
                    >
                </div>
                {{ if .Description }}
                    <div class="text-gray-600 dark:text-gray-300 text-sm">
                        {{ .Description }}
                    </div>
                {{ end }}
                <div
                    class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto"
                >

                    {{ if .RepoStats.StarCount }}
                        <div class="flex gap-1 items-center text-sm">
                            {{ i "star" "w-3 h-3 fill-current" }}
                            <span>{{ .RepoStats.StarCount }}</span>
                        </div>
                    {{ end }}
                </div>
            </div>
        {{ else }}
            <p class="px-6 dark:text-white">This user does not have any repos yet.</p>
        {{ end }}
    </div>

    <p class="text-sm font-bold py-2 px-6 dark:text-white">COLLABORATING ON</p>
    <div id="collaborating" class="grid grid-cols-1 gap-4 mb-6">
        {{ range .CollaboratingRepos }}
            <div
                id="repo-card"
                class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex flex-col"
            >
                <div id="repo-card-name" class="font-medium dark:text-white">
                    <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">
                        {{ index $.DidHandleMap .Did }}/{{ .Name }}
                    </a>
                </div>
                {{ if .Description }}
                    <div class="text-gray-600 dark:text-gray-300 text-sm">
                        {{ .Description }}
                    </div>
                {{ end }}
                <div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto">

                    {{ if .RepoStats.StarCount }}
                        <div class="flex gap-1 items-center text-sm">
                            {{ i "star" "w-3 h-3 fill-current" }}
                            <span>{{ .RepoStats.StarCount }}</span>
                        </div>
                    {{ end }}
                </div>
            </div>
        {{ else }}
            <p class="px-6 dark:text-white">This user is not collaborating.</p>
        {{ end }}
    </div>
{{ end }}