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

{{ define "repoContent" }}
    <main>
      {{ block "branchSelector" . }} {{ end }}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
          {{ block "fileTree" . }} {{ end }}
          {{ block "commitLog" . }} {{ 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"
    >
        <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>
    <a
        href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref }}"
        class="ml-2 no-underline flex items-center gap-2 text-sm uppercase font-bold"
    >
        <i class="w-4 h-4" data-lucide="logs"></i>
        {{ .TotalCommits }}
        {{ if eq .TotalCommits 1 }}commit{{ else }}commits{{ end }}
    </a>
</div>
{{ end }}

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

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

                    <time class="text-xs text-gray-500"
                        >{{ 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 }}/{{ .Name }}"
                        class="{{ $linkstyle }}"
                    >
                        <div class="flex items-center gap-2">
                            <i
                                class="w-3 h-3"
                                data-lucide="file"
                            ></i
                            >{{ .Name }}
                        </div>
                    </a>

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


{{ define "commitLog" }}
<div id="commit-log" class="hidden md:block md:col-span-1">
    {{ range .Commits }}
          <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"
                                  >{{ index $messageParts 0 }}</a
                              >
                              {{ if gt (len $messageParts) 1 }}

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

              <div class="text-xs text-gray-500">
                  <span class="font-mono">
                      <a
                          href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
                          class="text-gray-500 no-underline hover:underline"
                          >{{ slice .Hash.String 0 8 }}</a
                      >
                  </span>
                  <span
                      class="mx-2 before:content-['·'] before:select-none"
                  ></span>
                  <span>
                      <a
                          href="mailto:{{ .Author.Email }}"
                          class="text-gray-500 no-underline hover:underline"
                          >{{ .Author.Name }}</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 font-mono px-2 mx-1/2 inline-flex items-center">
                      {{ . }}
                    </span>
                  {{ end }}
              </div>
          </div>
    {{ end }}
</div>
{{ end }}


{{ define "repoAfter" }}
    {{- if .HTMLReadme }}
        <section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto {{ if not .Raw }} prose {{ end }}">
            <article class="{{ if .Raw }}whitespace-pre{{end}}">
                {{ if .Raw }}
                    <pre>{{ .HTMLReadme }}</pre>
                {{ else }}
                    {{ .HTMLReadme }}
                {{ end }}
            </article>
        </section>
    {{- end -}}


    <section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto">
        <strong>push</strong>
        <div class="py-2">
            <code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
        </div>
        <strong>clone</strong>
        

        <div class="flex flex-col gap-2">
            <div class="pt-2 flex flex-row gap-2">
                <span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
                <code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
            </div>
            <div class="pt-2 flex flex-row gap-2">
                <span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span><code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
            </div>
        </div>
        <p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
    </section>
{{ end }}