{{ 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>
        <div class="flex items-center justify-between pb-5">
          {{ block "branchSelector" . }}{{ end }}
          <div class="flex md:hidden items-center gap-4">
            <a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="inline-flex items-center text-sm gap-1">
              {{ i "git-commit-horizontal" "w-4" "h-4" }} {{ .TotalCommits }}
            </a>
            <a href="/{{ .RepoInfo.FullName }}/branches" class="inline-flex items-center text-sm gap-1">
              {{ i "git-branch" "w-4" "h-4" }} {{ len .Branches }}
            </a>
            <a href="/{{ .RepoInfo.FullName }}/tags" class="inline-flex items-center text-sm gap-1">
              {{ i "tags" "w-4" "h-4" }} {{ len .Tags }}
            </a>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
            {{ block "fileTree" . }}{{ end }}
            {{ block "rightInfo" . }}{{ end }}
        </div>
    </main>
{{ end }}

{{ define "branchSelector" }}
  <select
      onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
      class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
  >
      <optgroup label="branches ({{len .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 ({{len .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>
{{ 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" "size-4 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" "size-4" }}{{ .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="hidden md:block col-span-1">
      {{ block "commitLog" . }} {{ end }}
      {{ block "branchList" . }} {{ end }}
      {{ block "tagList" . }} {{ end }}
    </div>
{{ end }}

{{ define "commitLog" }}
<div id="commit-log" class="md:col-span-1 px-2 pb-4">
  <div class="flex justify-between items-center">
    <a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="flex text-black dark:text-white items-center gap-4 pb-2 no-underline hover:no-underline group">
      <div class="flex gap-2 items-center font-bold">
        {{ i "logs" "w-4 h-4" }} commits
      </div>
      <span class="hidden group-hover:flex gap-2 items-center text-sm text-gray-500 dark:text-gray-400 ">
        view {{ .TotalCommits }} commits {{ i "chevron-right" "w-4 h-4" }}
      </span>
    </a>
  </div>
  <div class="flex flex-col gap-6">
    {{ range .CommitsTrunc }}
    <div>
      <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 }}
  </div>
</div>
{{ end }}

{{ define "branchList" }}
  {{ if gt (len .BranchesTrunc) 0 }}
    <div id="branches" class="md:col-span-1 px-2 py-4 border-t border-gray-200 dark:border-gray-700">
      <a href="/{{ .RepoInfo.FullName }}/branches" class="flex text-black dark:text-white items-center gap-4 pb-2 no-underline hover:no-underline group">
        <div class="flex gap-2 items-center font-bold">
          {{ i "git-branch" "w-4 h-4" }} branches
        </div>
        <span class="hidden group-hover:flex gap-2 items-center text-sm text-gray-500 dark:text-gray-400 ">
          view {{ len .Branches }} branches {{ i "chevron-right" "w-4 h-4" }}
        </span>
      </a>
      <div class="flex flex-col gap-1">
        {{ range .BranchesTrunc }}
        <div class="text-base flex items-center gap-2">
          <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Reference.Name | urlquery }}"
            class="inline no-underline hover:underline dark:text-white">
            {{ .Reference.Name }}
          </a>
          {{ if .Commit }}
          <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
          <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .Commit.Author.When }}</time>
          {{ end }}
          {{ if .IsDefault }}
          <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
          <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono">default</span>
          {{ end }}
        </div>
        {{ end }}
      </div>
    </div>
  {{ end }}
{{ end }}

{{ define "tagList" }}
  {{ if gt (len .TagsTrunc) 0 }}
    <div id="tags" class="md:col-span-1 px-2 py-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-center">
        <a href="/{{ .RepoInfo.FullName }}/tags" class="flex text-black dark:text-white items-center gap-4 pb-2 no-underline hover:no-underline group">
          <div class="flex gap-2 items-center font-bold">
            {{ i "tags" "w-4 h-4" }} tags
          </div>
          <span class="hidden group-hover:flex gap-2 items-center text-sm text-gray-500 dark:text-gray-400 ">
            view {{ len .Tags }} tags {{ i "chevron-right" "w-4 h-4" }}
          </span>
        </a>
      </div>
      <div class="flex flex-col gap-1">
        {{ range $idx, $tag := .TagsTrunc }}
        {{ with $tag }}
        <div>
          <div class="text-base flex items-center gap-2">
            <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Reference.Name | urlquery }}"
              class="inline no-underline hover:underline dark:text-white">
              {{ .Reference.Name }}
            </a>
          </div>
          <div>
            {{ with .Tag }}
            <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .Tagger.When }}</time>
            {{ end }}
            {{ if eq $idx 0 }}
            <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
            <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono">latest</span>
            {{ end }}
          </div>
        </div>
        {{ end }}
        {{ end }}
      </div>
    </div>
  {{ end }}
{{ end }}

{{ define "repoAfter" }}
    {{- if .HTMLReadme }}
        <section
            class="p-6 mt-4 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 }}