{{ 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" }}
    <div class="flex flex-col gap-3 relative">
        <p class="px-6 text-sm font-bold py-2 dark:text-white">ACTIVITY</p>
        {{ range .ProfileTimeline }}
          {{ if eq .Type "issue" }}
          <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit max-w-full flex items-center gap-2">
              {{ $textColor := "text-gray-800 dark:text-gray-400" }}
              {{ $icon := "ban" }}
              {{ if .Issue.Open }}
                  {{ $textColor = "text-green-600 dark:text-green-500" }}
                  {{ $icon = "circle-dot" }}
              {{ end }}
            <div class="p-1 {{ $textColor }}">
                {{ i $icon "w-5 h-5" }}
            </div>
            <div>
              <p class="text-gray-600 dark:text-gray-300">
              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}/issues/{{ .Issue.IssueId }}" class="no-underline hover:underline">{{ .Issue.Title }} <span class="text-gray-500 dark:text-gray-400">#{{ .Issue.IssueId }}</span></a>
              on 
              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ index $.DidHandleMap .Repo.Did }}<span class="select-none">/</span>{{ .Repo.Name }}</a>
              <time class="text-gray-700 dark:text-gray-400 text-xs ml-2">{{ .Issue.Created | shortTimeFmt }}</time>
              </p>
            </div>
          </div>
          {{ else if eq .Type "pull" }}
          <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit flex items-center gap-3">
            {{ $textColor := "text-gray-800 dark:text-gray-400" }}
            {{ $icon := "git-pull-request-closed" }}
            {{ if .Pull.State.IsOpen }}
                {{ $textColor = "text-green-600 dark:text-green-500" }}
                {{ $icon = "git-pull-request" }}
            {{ else if .Pull.State.IsMerged }}
                {{ $textColor = "text-purple-600 dark:text-purple-500" }}
                {{ $icon = "git-merge" }}
            {{ end }}
            <div class="{{ $textColor }} p-1">
                {{ i $icon "w-5 h-5" }}
            </div>
            <div>
              <p class="text-gray-600 dark:text-gray-300">
              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}/pulls/{{ .Pull.PullId }}" class="no-underline hover:underline">{{ .Pull.Title }} <span class="text-gray-500 dark:text-gray-400">#{{ .Pull.PullId }}</span></a>
              on
              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">
                  {{ index $.DidHandleMap .Repo.Did }}<span class="select-none">/</span>{{ .Repo.Name }}</a>
              <time class="text-gray-700 dark:text-gray-400 text-xs ml-2">{{ .Pull.Created | shortTimeFmt }}</time>
              </p>
            </div>
          </div>
          {{ else if eq .Type "repo" }}
          <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit flex items-center gap-3">
            <div class="text-gray-800 dark:text-gray-400 p-1">
              {{ i "book-plus" "w-5 h-5" }}
            </div>
            <div>
              <p class="text-gray-600 dark:text-gray-300">
              created <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
              <time class="text-gray-700 dark:text-gray-400 text-xs ml-2">{{ .Repo.Created | shortTimeFmt }}</time>
              </p>
            </div>
          </div>
          {{ end }}
        {{ else }}
            <p class="px-6 dark:text-white">This user does not have any activity yet.</p>
        {{ end }}
      </div>
{{ 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 class="text-xl font-bold text-center dark:text-white">
            {{ truncateAt30 (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 "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 }}