{{ define "title" }}{{ .Path }} at {{ .Ref }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}

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

    {{ $title := printf "%s at %s &middot; %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" }}
    <div class="peer mb-3 text-sm flex justify-between gap-2 items-center">
        <div class="flex gap-3 items-center">
            <div class="bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-2 flex items-center gap-1 overflow-x-auto whitespace-nowrap w-fit">
                {{ $last := sub (len .BreadCrumbs) 1 }}
                {{ range $i, $b := .BreadCrumbs }}
                    {{ if eq $i $last }}
                        <span class="text-black dark:text-white">{{ pathUnescape (index $b 0) }}</span>
                    {{ else }}
                        <a href="{{ index $b 1 }}" class="text-gray-500 dark:text-gray-400 {{ $linkstyle }}">{{ pathUnescape (index $b 0) }}</a>
                        <span class="text-gray-500 dark:text-gray-400">/</span>
                    {{ end }}
                {{ end }}
            </div>
            <div class="text-gray-500 dark:text-gray-400 flex items-center gap-2">
                {{ if .BlobView.SizeHint }}
                    <span>{{ byteFmt .BlobView.SizeHint }}</span>
                {{ end }}
                {{ if (and .BlobView.ContentType.HasTextView (or (not .BlobView.ContentType.HasRenderedView) (not .ShowRendered))) }}
                    <span class="select-none [&:before]:content-['·']"></span>
                    <span>{{ .BlobView.Lines }} lines</span>
                {{ end }}
            </div>
        </div>
        <div class="hidden md:flex items-center gap-2 whitespace-nowrap text-sm">
            {{ if (and .BlobView.ContentType.HasTextView (or (not .BlobView.ContentType.HasRenderedView) (not .ShowRendered))) }}
              <div id="toggle-wrap-content" class="px-2">
                  <label class="flex items-center font-normal gap-2">
                      <input id="toggle-wrap-content-checkbox" type="checkbox" name="Wrap"/>
                      Wrap
                  </label>
              </div>
            {{ end }}
            <div class="bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-2 flex items-center gap-2 justify-center">
              <span class="text-gray-500 dark:text-gray-400">at</span>
              <a href="/{{ .RepoInfo.FullName }}/tree/{{ pathEscape .Ref }}" class="{{ $linkstyle }}">{{ .Ref }}</a>
            </div>
            {{ if .Language }}
              <div class="bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-2 flex items-center gap-2">
                {{ template "repo/fragments/colorBall" (dict "color" (langColor .Language)) }}
                {{ .Language }}
              </div>
            {{ end }}
            <div class="btn-group">
              {{ if (and .BlobView.ContentType.HasTextView .BlobView.ContentType.HasRenderedView) }}
                  <a href="/{{ .RepoInfo.FullName }}/blob/{{ pathEscape .Ref }}/{{ .Path }}?code={{ .ShowRendered }}" hx-boost="true" class="btn-group-item px-3 no-underline hover:no-underline">
                      View {{ if .ShowRendered }}code{{ else }}rendered{{ end }}
                  </a>
              {{ end }}
              {{ if .BlobView.ContentType.HasRawView }}
                  {{ $rawUrl := printf "/%s/raw/%s/%s" .RepoInfo.FullName (pathEscape .Ref) .Path }}
                  {{ $filename := pathUnescape (index (index .BreadCrumbs (sub (len .BreadCrumbs) 1)) 0) }}
                      <a href="{{ $rawUrl }}" class="btn-group-item px-3 no-underline hover:no-underline">View raw</a>
                      {{ if .BlobView.ContentType.HasTextView }}
                          <button
                              class="btn-group-item px-3"
                              title="Copy contents"
                              onclick="const btn=this,c=document.querySelector('#blob-contents');if(c){const cls=c.querySelectorAll('.cl');const text=cls.length>0?Array.from(cls).map(e=>e.textContent).join(''):c.textContent;navigator.clipboard.writeText(text);const h=btn.innerHTML;btn.innerHTML=`{{ i "copy-check" "size-4" }}`;setTimeout(()=>btn.innerHTML=h,1500)}">
                              {{ i "copy" "size-4" }}
                          </button>
                      {{ end }}
                      <a href="{{ $rawUrl }}?download=1" class="btn-group-item px-3 no-underline hover:no-underline" title="Download">
                          {{ i "download" "size-4" }}
                      </a>
              {{ end }}
            </div>
        </div>
    </div>

    {{ if .LastCommitInfo }}
      {{ template "repo/fragments/lastCommitPanel" $ }}
    {{ end }}

    {{ $wrapContentClasses := "peer-has-[:checked]:*:whitespace-pre-wrap peer-has-[:checked]:*:[overflow-wrap:anywhere]" }}

    {{ 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 {{ $wrapContentClasses }}">
        {{ if .ShowRendered }}
          <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.FileTooLarge }}
      <p class="text-center text-gray-400 dark:text-gray-500">
        This file is too large to render. <a href="/{{ .RepoInfo.FullName }}/raw/{{ pathEscape .Ref }}/{{ .Path }}">View raw.</a>.
      </p>
    {{ else if .BlobView.ContentType.IsMarkup }}
      <div class="overflow-auto relative {{ $wrapContentClasses }}">
        {{ if .ShowRendered }}
          <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 {{ $wrapContentClasses }}">
        <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>
    {{ else }}
      <p class="text-center text-gray-400 dark:text-gray-500">
          Previews are not supported for this file type.
      </p>
    {{ end }}
    {{ template "fragments/multiline-select" }}
    <script>
      (() => {
        const abortController = new AbortController();
        const toggle = document.querySelector('#toggle-wrap-content');
        const toggleCheckbox = document.querySelector('#toggle-wrap-content-checkbox');
        const contents = document.querySelector('#blob-contents');

        function showWrapContentToggleOnOverflow() {
          if(!toggle || !toggleCheckbox || !contents) return;

          const isScrollable = contents.scrollWidth > contents.clientWidth;
          const showToggle = isScrollable || toggleCheckbox.checked;

          if(showToggle) {
            toggle.classList.remove('hidden');
          } else {
            toggle.classList.add('hidden');
          }
        }

        window.addEventListener('resize', () => showWrapContentToggleOnOverflow(), {signal: abortController.signal});
        document.body.addEventListener('htmx:afterSettle', () => showWrapContentToggleOnOverflow(), {signal: abortController.signal});
        document.body.addEventListener('htmx:beforeCleanupElement', (e) => {
          if(e.target === toggle) {
            abortController.abort();
          }
        }, {signal: abortController.signal});

        showWrapContentToggleOnOverflow();
      })();
    </script>
    {{ if .LastCommitInfo }}
      {{ template "repo/fragments/permalinkShortcutScript" (printf "/%s/blob/%s/%s" .RepoInfo.RepoIdentifier .LastCommitInfo.Hash .Path) }}
    {{ end }}
{{ end }}
