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

{{ define "extrameta" }}
    {{ template "repo/fragments/meta" . }}

    {{ $title := printf "%s at %s · %s" .Path .Ref .RepoInfo.FullName }}
    {{ $url := printf "https://tangled.org/%s/blob/%s/%s" .RepoInfo.FullName .Ref .Path }}

    {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}

{{ end }}

{{ define "repoContent" }}
    {{ $linkstyle := "no-underline hover:underline" }}

    {{ if .LastCommitInfo }}
    <div class="pb-3 mb-3 border-b border-gray-200 dark:border-gray-700">
        <div id="commit-message">
            {{ $messageParts := splitN .LastCommitInfo.Message "\n\n" 2 }}
            <div class="text-base">
                <a href="/{{ .RepoInfo.FullName }}/commit/{{ .LastCommitInfo.Hash }}"
                   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 class="text-xs mt-2 text-gray-500 dark:text-gray-400 flex items-center flex-wrap">
            {{ if .LastCommit.Author }}
            {{ $authorDid := index .EmailToDid .LastCommit.Author.Email }}
            <span class="flex items-center gap-1">
                {{ if $authorDid }}
                    {{ template "user/fragments/picHandleLink" $authorDid }}
                {{ else }}
                    {{ placeholderAvatar "tiny" }}
                    <a href="mailto:{{ .LastCommit.Author.Email }}" class="no-underline hover:underline">{{ .LastCommit.Author.Name }}</a>
                {{ end }}
            </span>
            <span class="px-1 select-none before:content-['\00B7']"></span>
            {{ end }}
            {{ template "repo/fragments/time" .LastCommitInfo.When }}
            <span class="px-1 select-none before:content-['\00B7']"></span>
            <span class="font-mono">
                <a href="/{{ .RepoInfo.FullName }}/commit/{{ .LastCommitInfo.Hash.String }}"
                   class="no-underline hover:underline text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded">
                    {{ slice .LastCommitInfo.Hash.String 0 8 }}
                </a>
            </span>
        </div>
    </div>
    {{ end }}

    <div class="pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
        <div class="flex flex-col md:flex-row md:justify-between gap-2">
            <div id="breadcrumbs" class="overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500">
                {{ range $idx, $value := .BreadCrumbs }}
                    {{ if ne $idx (sub (len $.BreadCrumbs) 1) }}
                        <a
                            href="{{ index . 1 }}"
                            class="text-bold text-gray-500 dark:text-gray-400 {{ $linkstyle }}"
                            >{{ pathUnescape (index . 0) }}</a
                        >
                        /
                    {{ else }}
                        <span class="text-bold text-black dark:text-white"
                            >{{ pathUnescape (index . 0) }}</span
                        >
                    {{ end }}
                {{ end }}
            </div>
            <div id="file-info" class="text-gray-500 dark:text-gray-400 text-xs md:text-sm flex flex-wrap items-center gap-1 md:gap-0">
                <span>at <a href="/{{ .RepoInfo.FullName }}/tree/{{ .Ref }}">{{ .Ref }}</a></span>

                {{ if .BlobView.ShowingText }}
                  <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
                  <span>{{ .BlobView.Lines }} lines</span>
                {{ end }}

                {{ if .BlobView.SizeHint }}
                  <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
                  <span>{{ byteFmt .BlobView.SizeHint }}</span>
                {{ end }}

                {{ if .BlobView.HasRawView }}
                  <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
                  <a href="/{{ .RepoInfo.FullName }}/raw/{{ .Ref }}/{{ .Path }}">view raw</a>
                {{ end }}

                {{ if .BlobView.ShowToggle }}
                  <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
                  <a href="/{{ .RepoInfo.FullName }}/blob/{{ .Ref }}/{{ .Path }}?code={{ .BlobView.ShowingRendered }}" hx-boost="true">
                    view {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
                  </a>
                {{ end }}
            </div>
        </div>
    </div>
    {{ if .BlobView.IsUnsupported }}
      <p class="text-center text-gray-400 dark:text-gray-500">
          Previews are not supported for this file type.
      </p>
    {{ else if .BlobView.ContentType.IsSubmodule }}
      <p class="text-center text-gray-400 dark:text-gray-500">
        This directory is a git submodule of <a href="{{ .BlobView.ContentSrc }}">{{ .BlobView.ContentSrc }}</a>.
      </p>
    {{ else if .BlobView.ContentType.IsImage }}
      <div class="text-center">
        <img src="{{ .BlobView.ContentSrc }}"
             alt="{{ .Path }}"
             class="max-w-full h-auto mx-auto border border-gray-200 dark:border-gray-700 rounded" />
      </div>
    {{ else if .BlobView.ContentType.IsVideo }}
      <div class="text-center">
        <video controls class="max-w-full h-auto mx-auto border border-gray-200 dark:border-gray-700 rounded">
            <source src="{{ .BlobView.ContentSrc }}">
            Your browser does not support the video tag.
        </video>
      </div>
    {{ else if .BlobView.ContentType.IsSvg }}
      <div class="overflow-auto relative">
        {{ if .BlobView.ShowingRendered }}
          <div class="text-center">
            <img src="{{ .BlobView.ContentSrc }}"
                 alt="{{ .Path }}"
                 class="max-w-full h-auto mx-auto border border-gray-200 dark:border-gray-700 rounded" />
          </div>
        {{ else }}
          <div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ code .BlobView.Contents .Path | escapeHtml }}</div>
        {{ end }}
      </div>
    {{ else if .BlobView.ContentType.IsMarkup }}
      <div class="overflow-auto relative">
        {{ if .BlobView.ShowingRendered }}
          <div id="blob-contents" class="prose dark:prose-invert">{{ .BlobView.Contents | readme }}</div>
        {{ else }}
          <div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ code .BlobView.Contents .Path | escapeHtml }}</div>
        {{ end }}
      </div>
    {{ else if .BlobView.ContentType.IsCode }}
      <div class="overflow-auto relative">
        <div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ code .BlobView.Contents .Path | escapeHtml }}</div>
      </div>
    {{ end }}
    {{ template "fragments/multiline-select" }}
{{ end }}