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

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

        <div class="md: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 rounded-full p-2" src="{{ .AvatarUri }}" />
            {{ end }}
        </div>
        <p class="text-xl font-bold text-center">
            {{ truncateAt30 (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" }}
            {{ template "fragments/follow" . }}
        {{ 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>
                {{ if .Description }}
                    <div class="text-gray-600 text-sm">
                        {{ .Description }}
                    </div>
                {{ end }}
                <div
                    class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto"
                >
                    {{ .Knot }}

                    {{ if .RepoStats.StarCount }}
                        <div class="flex gap-1 items-center text-sm">
                            <span
                                class="w-3 h-3 fill-current"
                                data-lucide="star"
                            ></span>
                            <span>{{ .RepoStats.StarCount }}</span>
                        </div>
                    {{ end }}
                </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 flex flex-col"
            >
                <div id="repo-card-name" class="font-medium">
                    <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">
                        {{ index $.DidHandleMap .Did }}/{{ .Name }}
                    </a>
                </div>
                {{ if .Description }}
                    <div class="text-gray-600 text-sm">
                        {{ .Description }}
                    </div>
                {{ end }}
                <div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto">
                    {{ .Knot }}

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