{{ define "fragments/diff" }}
{{ $repo := index . 0 }}
{{ $diff := index . 1 }}
{{ $commit := $diff.Commit }}
{{ $stat := $diff.Stat }}
{{ $diff := $diff.Diff }}

  {{ $this := $commit.This }}
  {{ $parent := $commit.Parent }}

  {{ $last := sub (len $diff) 1 }}
  {{ range $idx, $hunk := $diff }}
  {{ with $hunk }}
  <section class="mt-6 border border-gray-200 w-full mx-auto rounded bg-white drop-shadow-sm">
    <div id="file-{{ .Name.New }}">
      <div id="diff-file">
        <details open>
          <summary class="list-none cursor-pointer sticky top-0">
            <div id="diff-file-header" class="rounded cursor-pointer bg-white flex justify-between">
              <div id="left-side-items" class="p-2 flex gap-2 items-center">
                {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}

                {{ if .IsNew }}
                <span class="bg-green-100 text-green-700 {{ $markerstyle }}">ADDED</span>
                {{ else if .IsDelete }}
                <span class="bg-red-100 text-red-700 {{ $markerstyle }}">DELETED</span>
                {{ else if .IsCopy }}
                <span class="bg-gray-100 text-gray-700 {{ $markerstyle }}">COPIED</span>
                {{ else if .IsRename }}
                <span class="bg-gray-100 text-gray-700 {{ $markerstyle }}">RENAMED</span>
                {{ else }}
                <span class="bg-gray-100 text-gray-700 {{ $markerstyle }}">MODIFIED</span>
                {{ end }}

                {{ if .IsDelete }}
                <a {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
                  {{ .Name.Old }}
                </a>
                {{ else if (or .IsCopy .IsRename) }}
                <a {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
                  {{ .Name.Old }}
                </a>
                <i class="w-4 h-4" data-lucide="arrow-right"></i>
                <a {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
                  {{ .Name.New }}
                </a>
                {{ else }}
                <a {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
                  {{ .Name.New }}
                </a>
                {{ end }}
              </div>

              {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 rounded" }}
              <div id="right-side-items" class="p-2 flex items-center">
                <a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}"><i class="w-4 h-4" data-lucide="arrow-up-to-line"></i></a>
                {{ if gt $idx 0 }}
                  {{ $prev := index $diff (sub $idx 1) }}
                  <a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}"><i class="w-4 h-4" data-lucide="arrow-up"></i></a>
                {{ end }}

                {{ if lt $idx $last }}
                  {{ $next := index $diff (add $idx 1) }}
                  <a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}"><i class="w-4 h-4" data-lucide="arrow-down"></i></a>
                {{ end }}
              </div>

            </div>
          </summary>

          <div class="transition-all duration-700 ease-in-out">
            {{ if .IsDelete }}
            <p class="text-center text-gray-400 p-4">
            This file has been deleted in this commit.
            </p>
            {{ else }}
            {{ if .IsBinary }}
            <p class="text-center text-gray-400 p-4">
            This is a binary file and will not be displayed.
            </p>
            {{ else }}
            <pre class="overflow-auto">
              {{- range .TextFragments -}}
                <div class="bg-gray-100 text-gray-500 select-none">{{ .Header }}</div>
                {{- range .Lines -}}
                    {{- if eq .Op.String "+" -}}
                    <div class="bg-green-100 text-green-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
                    {{- end -}}

                    {{- if eq .Op.String "-" -}}
                    <div class="bg-red-100 text-red-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
                    {{- end -}}

                    {{- if eq .Op.String " " -}}
                    <div class="bg-white text-gray-500 px"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
                    {{- end -}}

                {{- end -}}
              {{- end -}}
            </pre>
            {{- end -}}
            {{ end }}
          </div>

        </details>

      </div>
    </div>
  </section>
  {{ end }}
  {{ end }}
{{ end }}