{{ define "title" }}{{ .RepoInfo.FullName }} at {{ .Ref }}{{ end }}

{{ define "extrameta" }}
    <meta
        name="vcs:clone"
        content="https://tangled.sh/{{ .RepoInfo.FullName }}"
    />
    <meta
        name="forge:summary"
        content="https://tangled.sh/{{ .RepoInfo.FullName }}"
    />
    <meta
        name="forge:dir"
        content="https://tangled.sh/{{ .RepoInfo.FullName }}/tree/{ref}/{path}"
    />
    <meta
        name="forge:file"
        content="https://tangled.sh/{{ .RepoInfo.FullName }}/blob/{ref}/{path}"
    />
    <meta
        name="forge:line"
        content="https://tangled.sh/{{ .RepoInfo.FullName }}/blob/{ref}/{path}#L{line}"
    />
    <meta
        name="go-import"
        content="tangled.sh/{{ .RepoInfo.FullNameWithoutAt }} git https://tangled.sh/{{ .RepoInfo.FullName }}"
    />
{{ end }}

{{ define "repoContent" }}
    <main>
        {{ block "branchSelector" . }}{{ end }}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
            {{ block "fileTree" . }}{{ end }}
            {{ block "rightInfo" . }}{{ end }}
        </div>
    </main>
{{ end }}

{{ define "branchSelector" }}
    <div class="flex justify-between pb-5">
        <select
            onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
            class="p-1 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
        >
            <optgroup label="branches" class="bold text-sm">
                {{ range .Branches }}
                    <option
                        value="{{ .Reference.Name }}"
                        class="py-1"
                        {{ if eq .Reference.Name $.Ref }}
                            selected
                        {{ end }}
                    >
                        {{ .Reference.Name }}
                    </option>
                {{ end }}
            </optgroup>
            <optgroup label="tags" class="bold text-sm">
                {{ range .Tags }}
                    <option
                        value="{{ .Reference.Name }}"
                        class="py-1"
                        {{ if eq .Reference.Name $.Ref }}
                            selected
                        {{ end }}
                    >
                        {{ .Reference.Name }}
                    </option>
                {{ else }}
                    <option class="py-1" disabled>no tags found</option>
                {{ end }}
            </optgroup>
        </select>
    </div>
{{ end }}

{{ define "fileTree" }}
    <div
        id="file-tree"
        class="col-span-1 pr-2 md:border-r md:border-gray-200 dark:md:border-gray-700"
    >
        {{ $containerstyle := "py-1" }}
        {{ $linkstyle := "no-underline hover:underline dark:text-white" }}

        {{ range .Files }}
            {{ if not .IsFile }}
                <div class="{{ $containerstyle }}">
                    <div class="flex justify-between items-center">
                        <a
                            href="/{{ $.RepoInfo.FullName }}/tree/{{ $.Ref | urlquery }}/{{ .Name }}"
                            class="{{ $linkstyle }}"
                        >
                            <div class="flex items-center gap-2">
                                {{ i "folder" "w-3 h-3 fill-current" }}
                                {{ .Name }}
                            </div>
                        </a>

                        <time class="text-xs text-gray-500 dark:text-gray-400"
                            >{{ timeFmt .LastCommit.When }}</time
                        >
                    </div>
                </div>
            {{ end }}
        {{ end }}

        {{ range .Files }}
            {{ if .IsFile }}
                <div class="{{ $containerstyle }}">
                    <div class="flex justify-between items-center">
                        <a
                            href="/{{ $.RepoInfo.FullName }}/blob/{{ $.Ref | urlquery }}/{{ .Name }}"
                            class="{{ $linkstyle }}"
                        >
                            <div class="flex items-center gap-2">
                                {{ i "file" "w-3 h-3" }}{{ .Name }}
                            </div>
                        </a>

                        <time class="text-xs text-gray-500 dark:text-gray-400"
                            >{{ timeFmt .LastCommit.When }}</time
                        >
                    </div>
                </div>
            {{ end }}
        {{ end }}
    </div>
{{ end }}

{{ define "rightInfo" }}
    <div id="right-info" class="col-span-1">
        <div id="commit-log" class="md:col-span-1">
            <h2
                class="flex text-gray-500 dark:text-gray-400 items-center gap-2 pb-4 pl-2"
            >
                {{ i "logs" "w-4 h-4" }}
                commits
            </h2>
            {{ range .CommitsTrunc }}
                <div class="relative px-2 pb-8">
                    <div id="commit-message">
                        {{ $messageParts := splitN .Message "\n\n" 2 }}
                        <div class="text-base cursor-pointer">
                            <div>
                                <div>
                                    <a
                                        href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
                                        class="inline no-underline hover:underline dark:text-white"
                                        >{{ index $messageParts 0 }}</a
                                    >
                                    {{ if gt (len $messageParts) 1 }}

                                        <button
                                            class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 rounded dark:bg-gray-700 dark:hover:bg-gray-600"
                                            hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')"
                                        >
                                            {{ i "ellipsis" "w-3 h-3" }}
                                        </button>
                                    {{ end }}
                                </div>
                                {{ if gt (len $messageParts) 1 }}
                                    <p
                                        class="hidden mt-1 text-sm cursor-text pb-2 dark:text-gray-300"
                                    >
                                        {{ nl2br (index $messageParts 1) }}
                                    </p>
                                {{ end }}
                            </div>
                        </div>
                    </div>

                    <div class="text-xs text-gray-500 dark:text-gray-400">
                        <span class="font-mono">
                            <a
                                href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
                                class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
                                >{{ slice .Hash.String 0 8 }}</a
                            ></span
                        >
                        <span
                            class="mx-2 before:content-['·'] before:select-none"
                        ></span>
                        <span>
                            {{ $didOrHandle := index $.EmailToDidOrHandle .Author.Email }}
                            <a
                                href="{{ if $didOrHandle }}
                                    /{{ $didOrHandle }}
                                {{ else }}
                                    mailto:{{ .Author.Email }}
                                {{ end }}"
                                class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
                                >{{ if $didOrHandle }}
                                    {{ $didOrHandle }}
                                {{ else }}
                                    {{ .Author.Name }}
                                {{ end }}</a
                            >
                        </span>
                        <div
                            class="inline-block px-1 select-none after:content-['·']"
                        ></div>
                        <span>{{ timeFmt .Author.When }}</span>
                        {{ $tagsForCommit := index $.TagMap .Hash.String }}
                        {{ if gt (len $tagsForCommit) 0 }}
                            <div
                                class="inline-block px-1 select-none after:content-['·']"
                            ></div>
                        {{ end }}
                        {{ range $tagsForCommit }}
                            <span
                                class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center"
                            >
                                {{ . }}
                            </span>
                        {{ end }}
                    </div>
                </div>
            {{ end }}
            {{ $more := sub .TotalCommits (len .CommitsTrunc) }}
            {{ if gt $more 0 }}
                <div
                    class="flex text-gray-500 dark:text-gray-400 mb-2 gap-1 justify-end items-center"
                >
                    <a
                        href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}"
                        class="text-gray-500 dark:text-gray-400 text-sm"
                    >
                        &hellip; and {{ $more }} more
                    </a>
                    {{ i "arrow-right" "w-3 h-3" }}
                </div>
            {{ end }}
        </div>
        {{ if gt (len .Tags) 0 }}
            <div
                id="tags"
                class="md:col-span-1 pt-4 border-t border-gray-200 dark:border-gray-700"
            >
                <h2
                    class="flex text-gray-500 dark:text-gray-400 items-center gap-2 pb-4 pl-2"
                >
                    {{ i "tags" "w-4 h-4" }}
                    tags
                </h2>
                {{ range .Tags }}
                    <div class="relative px-2 pb-4">
                        <div class="text-base">
                            <div>
                                <a
                                    href="/{{ $.RepoInfo.FullName }}/tree/{{ .Reference.Name | urlquery }}"
                                    class="inline no-underline hover:underline dark:text-white"
                                    >{{ .Reference.Name }}</a
                                >
                                {{ if gt (len .Message) 0 }}
                                    {{ $messageParts := splitN .Message "\n\n" 2 }}
                                    {{ $title := index $messageParts 0 }}
                                    {{ $description := index $messageParts 1 }}
                                    <span
                                        class="text-sm text-gray-500 dark:text-gray-400 ml-2 truncate inline-block align-middle"
                                        >{{ $title }}</span
                                    >
                                    {{ if gt (len $description) 1 }}
                                        <button
                                            class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 rounded dark:bg-gray-700 dark:hover:bg-gray-600"
                                            hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')"
                                        >
                                            {{ i "ellipsis" "w-3 h-3" }}
                                        </button>
                                    {{ end }}
                                {{ end }}
                            </div>
                            {{ if gt (len .Message) 0 }}
                                {{ $messageParts := splitN .Message "\n\n" 2 }}
                                {{ $description := index $messageParts 1 }}
                                {{ if gt (len $description) 1 }}
                                    <div
                                        class="hidden mt-1 text-sm cursor-text pb-2 dark:text-gray-300"
                                    >
                                        {{ $description | markdown }}
                                    </div>
                                {{ end }}
                            {{ end }}
                            <div
                                class="text-xs text-gray-500 dark:text-gray-400"
                            >
                                <span class="font-mono">
                                    <a
                                        href="/{{ $.RepoInfo.FullName }}/commit/{{ .Reference.Hash }}"
                                        class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
                                        >{{ slice .Reference.Hash 0 8 }}</a
                                    >
                                </span>
                                {{ with .Tag }}
                                    <div
                                        class="inline-block px-1 select-none after:content-['·']"
                                    ></div>
                                    <time>{{ timeFmt .Tagger.When }}</time>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        {{ end }}
    </div>
{{ end }}

{{ define "repoAfter" }}
    {{- if .HTMLReadme }}
        <div
            class="mt-4 bg-white text-gray-600 dark:text-gray-400
            px-6 py-3  prose dark:prose-invert
            border-gray-200 dark:border-gray-700
            text-sm border-b rounded-tl rounded-tr"
        >
            {{ .ReadmeFileName }}
        </div>
        <section
            class="p-6 rounded-br rounded-bl bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto {{ if not .Raw }}
                prose dark:prose-invert dark:[&_pre]:bg-gray-900
                dark:[&_code]:text-gray-300 dark:[&_pre_code]:bg-gray-900
                dark:[&_pre]:border dark:[&_pre]:border-gray-700
            {{ end }}"
        >
            <article class="{{ if .Raw }}whitespace-pre{{ end }}">
                {{ if .Raw }}
                    <pre
                        class="dark:bg-gray-900 dark:text-gray-200 dark:border dark:border-gray-700 dark:p-4 dark:rounded"
                    >
{{ .HTMLReadme }}</pre
                    >
                {{ else }}
                    {{ .HTMLReadme }}
                {{ end }}
            </article>
        </section>
    {{- end -}}

    {{ template "repo/fragments/cloneInstructions" . }}
{{ end }}