{{ define "title" }} change {{ .Change.Hash }} · {{ .RepoInfo.FullName }} {{ end }}

{{ define "repoContent" }}
{{ $repo := .RepoInfo.FullName }}
{{ $change := .Change }}

<section class="dark:text-white">
  <h1 class="mt-2">{{ $change.Message }}</h1>

  <div class="flex items-center gap-3 py-3">
    {{ if $change.Authors }}
      {{ $author := index $change.Authors 0 }}
      {{ if $author.Did }}
        <a href="/{{ resolve (deref $author.Did) }}">
          {{ template "user/fragments/pic" (list (deref $author.Did) "h-10 w-10") }}
        </a>
      {{ else }}
        {{ placeholderAvatar "md" }}
      {{ end }}
      <div class="flex flex-col">
        <div>
          {{ range $idx, $a := $change.Authors }}
            {{ if gt $idx 0 }}, {{ end }}
            {{ if $a.Did }}
              <a href="/{{ resolve (deref $a.Did) }}" class="no-underline hover:underline text-gray-700 dark:text-gray-300">{{ deref $a.Did | resolve | truncateAt30 }}</a>
            {{ else }}
              {{ $a.Name }}{{ if $a.Email }} &lt;{{ $a.Email }}&gt;{{ end }}
            {{ end }}
          {{ end }}
        </div>
        {{ if $change.HasTimestamp }}
          <div class="text-sm text-gray-500 dark:text-gray-400">
            {{ template "repo/fragments/time" $change.Timestamp }}
          </div>
        {{ end }}
        <div class="font-mono text-sm text-gray-500 dark:text-gray-400 break-all">{{ $change.Hash }}</div>
      </div>
    {{ else }}
      {{ placeholderAvatar "md" }}
      <div class="text-gray-500">unknown</div>
    {{ end }}
  </div>

  {{ if .RepoInfo.Roles.CanManageRepo }}
  <div class="mt-4" id="change">
    <button
      class="px-3 py-1.5 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-700 rounded hover:bg-red-50 dark:hover:bg-red-900/30 cursor-pointer"
      hx-post="/{{ $repo }}/change/{{ $change.Hash }}/unrecord"
      hx-confirm="Are you sure you want to unrecord this change? This will remove it from the current channel."
      hx-swap="none"
    >
      Unrecord
    </button>
  </div>
  {{ end }}

  <h2 class="mt-6 text-sm uppercase text-gray-600 dark:text-gray-400">Dependencies</h2>
  <ul class="mt-2">
    {{ if $change.Dependencies }}
      {{ range $change.Dependencies }}
        <li class="font-mono text-sm break-all">
          <a class="no-underline hover:underline" href="/{{ $repo }}/change/{{ . }}">{{ . }}</a>
        </li>
      {{ end }}
    {{ else }}
      <li class="text-sm text-gray-500">none</li>
    {{ end }}
  </ul>

  <h2 class="mt-8 text-sm uppercase text-gray-600 dark:text-gray-400">Change contents</h2>
  {{ if $change.HasDiff }}
    {{ if $change.DiffLines }}
      <div class="overflow-x-auto text-sm bg-gray-50 dark:bg-gray-900 p-3 rounded mt-2 font-mono">
        {{ $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800" }}
        {{ $lineNrSepStyle1 := "" }}
        {{ $lineNrSepStyle2 := "pr-2 border-r border-gray-200 dark:border-gray-700" }}
        {{ $containerStyle := "inline-flex w-full items-center" }}
        {{ range $change.DiffLines }}
          {{ if eq .Kind "section" }}
            <div class="whitespace-pre text-xs uppercase tracking-wide text-gray-600 dark:text-gray-300 mt-3">{{ .Text }}</div>
          {{ else if eq .Kind "meta" }}
            <div class="whitespace-pre text-gray-500 dark:text-gray-400">{{ .Text }}</div>
          {{ else }}
            {{ $lineClass := "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400" }}
            {{ if eq .Kind "add" }}
              {{ $lineClass = "bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400" }}
            {{ else if eq .Kind "del" }}
              {{ $lineClass = "bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400" }}
            {{ end }}
            <div class="{{ $containerStyle }} {{ $lineClass }}">
              <div class="{{ $lineNrStyle }} {{ $lineNrSepStyle1 }}">
                {{ if .HasOld }}{{ .OldLine }}{{ else }}<span aria-hidden="true" class="invisible">0</span>{{ end }}
              </div>
              <div class="{{ $lineNrStyle }} {{ $lineNrSepStyle2 }}">
                {{ if .HasNew }}{{ .NewLine }}{{ else }}<span aria-hidden="true" class="invisible">0</span>{{ end }}
              </div>
              <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op }}</div>
              <div class="px-2 whitespace-pre">{{ .Body }}</div>
            </div>
          {{ end }}
        {{ end }}
      </div>
    {{ else }}
      <pre class="overflow-x-auto text-sm bg-gray-50 dark:bg-gray-900 p-3 rounded mt-2 font-mono whitespace-pre">{{ $change.Diff }}</pre>
    {{ end }}
  {{ else }}
    <div class="text-sm text-gray-500 mt-2">no diff available</div>
  {{ end }}
</section>
{{ end }}