{{ define "title" }}
    {{ .Pull.Title }} · pull #{{ .Pull.PullId }} · {{ .RepoInfo.FullName }}
{{ end }}

{{ define "repoContent" }}
    <header class="pb-4">
        <h1 class="text-2xl dark:text-white">
            {{ .Pull.Title }}
            <span class="text-gray-500 dark:text-gray-400">#{{ .Pull.PullId }}</span>
        </h1>
    </header>

    {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
    {{ $icon := "ban" }}

    {{ if .Pull.State.IsOpen }}
        {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
        {{ $icon = "git-pull-request" }}
    {{ else if .Pull.State.IsMerged }}
        {{ $bgColor = "bg-purple-600 dark:bg-purple-700" }}
        {{ $icon = "git-merge" }}
    {{ end }}

    <section>
        <div class="flex items-center gap-2">
            <div
                id="state"
                class="inline-flex items-center rounded px-3 py-1 {{ $bgColor }}"
            >
                {{ i $icon "w-4 h-4 mr-1.5 text-white" }}
                <span class="text-white">{{ .Pull.State.String }}</span>
            </div>
            <span class="text-gray-500 dark:text-gray-400 text-sm">
                opened by
                {{ $owner := index $.DidHandleMap .Pull.OwnerDid }}
                <a href="/{{ $owner }}" class="no-underline hover:underline"
                    >{{ $owner }}</a
                >
                <span class="select-none before:content-['\00B7']"></span>
                <time>{{ .Pull.Created | timeFmt }}</time>
                <span class="select-none before:content-['\00B7']"></span>
                <span>
                  targeting
                  <span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
                    <a href="/{{ .RepoInfo.FullName }}/tree/{{ .Pull.TargetBranch }}" class="no-underline hover:underline">{{ .Pull.TargetBranch }}</a>
                  </span>
                </span>
                {{ if not .Pull.IsPatch }}
                <span>from
                  {{ if not .Pull.IsSameRepoBranch }}
                    <a href="/{{ $owner }}/{{ .PullSourceRepo.Name }}" class="no-underline hover:underline">{{ $owner }}/{{ .PullSourceRepo.Name }}</a>
                  {{ end }}

                  {{ $fullRepo := .RepoInfo.FullName }}
                  {{ if not .Pull.IsSameRepoBranch }}
                    {{ $fullRepo = printf "%s/%s" $owner .PullSourceRepo.Name }}
                  {{ end }}
                  <span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
                    <a href="/{{ $fullRepo }}/tree/{{ .Pull.PullSource.Branch }}" class="no-underline hover:underline">{{ .Pull.PullSource.Branch }}</a>
                  </span>
                </span>
                {{ end }}
            </span>
        </div>

        {{ if .Pull.Body }}
            <article id="body" class="mt-2 prose dark:prose-invert">
                {{ .Pull.Body | markdown }}
            </article>
        {{ end }}
    </section>

{{ end }}

{{ define "repoAfter" }}
    <section id="submissions" class="mt-4">
      <div class="flex flex-col gap-4">
        {{ block "submissions" . }} {{ end }}
      </div>
    </section>

    <div id="pull-close"></div>
    <div id="pull-reopen"></div>
{{ end }}

{{ define "submissions" }}
  {{ $lastIdx := sub (len .Pull.Submissions) 1 }}
  {{ $targetBranch := .Pull.TargetBranch }}
  {{ $repoName := .RepoInfo.FullName }}
  {{ range $idx, $item := .Pull.Submissions }}
    {{ $diff := $item.AsNiceDiff $targetBranch }}
    {{ with $item }}
    <details {{ if eq $idx $lastIdx }}open{{ end }}>
        <summary id="round-#{{ .RoundNumber }}" class="list-none cursor-pointer">
          <div class="flex flex-wrap gap-2 items-center">
            <!-- round number -->
            <div class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-3 py-2 dark:text-white">
              #{{ .RoundNumber }}
            </div>
            <!-- round summary -->
            <div class="rounded drop-shadow-sm bg-white dark:bg-gray-800 p-2 text-gray-500 dark:text-gray-400">
              <span>
                {{ $owner := index $.DidHandleMap $.Pull.OwnerDid }}
                {{ $re := "re" }}
                {{ if eq .RoundNumber 0 }}
                  {{ $re = "" }}
                {{ end }}
                <span class="hidden md:inline">{{$re}}submitted</span>
                by <a href="/{{ $owner }}">{{ $owner }}</a>
                <span class="select-none before:content-['\00B7']"></span>
                <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ .RoundNumber }}"><time>{{ .Created | shortTimeFmt }}</time></a>
                <span class="select-none before:content-['·']"></span>
                {{ $s := "s" }}
                {{ if eq (len .Comments) 1 }}
                  {{ $s = "" }}
                {{ end }}
                {{ len .Comments }} comment{{$s}}
              </span>
            </div>
            <!-- view patch -->
            <a class="btn flex items-center gap-2 no-underline hover:no-underline p-2"
               hx-boost="true"
               href="/{{ $.RepoInfo.FullName }}/pulls/{{ $.Pull.PullId }}/round/{{.RoundNumber}}">
              {{ i "file-diff" "w-4 h-4" }} <span class="hidden md:inline">view patch</span>
            </a>
          </div>
        </summary>
        <div class="md:pl-12 flex flex-col gap-2 mt-2 relative">
          {{ range .Comments }}
            <div id="comment-{{.ID}}" class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-2 px-4 relative w-fit">
              <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
              <div class="text-sm text-gray-500 dark:text-gray-400">
                {{ $owner := index $.DidHandleMap .OwnerDid }} 
                <a href="/{{$owner}}">{{$owner}}</a>
                <span class="before:content-['·']"></span>
                <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="#comment-{{.ID}}"><time>{{ .Created | shortTimeFmt }}</time></a>
              </div>
              <div class="prose dark:prose-invert">
                {{ .Body | markdown }}
              </div>
            </div>
          {{ end }}

          {{ if eq $lastIdx .RoundNumber }}
            {{ block "mergeStatus" $ }} {{ end }}
            {{ block "resubmitStatus" $ }} {{ end }}
          {{ end }}

          {{ if $.LoggedInUser }}
            {{ template "fragments/pullActions" (dict "LoggedInUser" $.LoggedInUser "Pull" $.Pull "RepoInfo" $.RepoInfo "RoundNumber" .RoundNumber "MergeCheck" $.MergeCheck "ResubmitCheck" $.ResubmitCheck) }}
          {{ else }}
            <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm px-6 py-4 w-fit dark:text-white">
              <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
              <a href="/login" class="underline">login</a> to join the discussion
            </div>
          {{ end }}
        </div>
    </details>
    <hr class="md:hidden"/>
    {{ end }}
  {{ end }}
{{ end }}

{{ define "mergeStatus" }}
  {{ if .Pull.State.IsClosed }}
  <div class="bg-gray-50 dark:bg-gray-700 border border-black dark:border-gray-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
    <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
    <div class="flex items-center gap-2 text-black dark:text-white">
      {{ i "ban" "w-4 h-4" }}
      <span class="font-medium">closed without merging</span
      >
    </div>
  </div>
  {{ else if .Pull.State.IsMerged }}
  <div class="bg-purple-50 dark:bg-purple-900 border border-purple-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
    <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
    <div class="flex items-center gap-2 text-purple-500 dark:text-purple-300">
      {{ i "git-merge" "w-4 h-4" }}
      <span class="font-medium">pull request successfully merged</span
      >
    </div>
  </div>
  {{ else if and .MergeCheck .MergeCheck.Error }}
    <div class="bg-red-50 dark:bg-red-900 border border-red-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
      <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
      <div class="flex items-center gap-2 text-red-500 dark:text-red-300">
        {{ i "triangle-alert" "w-4 h-4" }}
        <span class="font-medium">{{ .MergeCheck.Error }}</span>
      </div>
    </div>
  {{ else if and .MergeCheck .MergeCheck.IsConflicted }}
    <div class="bg-red-50 dark:bg-red-900 border border-red-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
      <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
      <div class="flex flex-col gap-2 text-red-500 dark:text-red-300">
        <div class="flex items-center gap-2">
          {{ i "triangle-alert" "w-4 h-4" }}
          <span class="font-medium">merge conflicts detected</span>
        </div>
        <ul class="space-y-1">
          {{ range .MergeCheck.Conflicts }}
            {{ if .Filename }}
            <li class="flex items-center">
              {{ i "file-warning" "w-4 h-4 mr-1.5 text-red-500 dark:text-red-300" }}
              <span class="font-mono">{{ slice .Filename 0 (sub (len .Filename) 2) }}</span>
            </li>
            {{ end }}
          {{ end }}
        </ul>
      </div>
    </div>
  {{ else if .MergeCheck }}
  <div class="bg-green-50 dark:bg-green-900 border border-green-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
    <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
    <div class="flex items-center gap-2 text-green-500 dark:text-green-300">
      {{ i "circle-check-big" "w-4 h-4" }}
      <span class="font-medium">no conflicts, ready to merge</span>
    </div>
  </div>
  {{ end }}
{{ end }}

{{ define "resubmitStatus" }}
  {{ if .ResubmitCheck.Yes }}
  <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
    <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
    <div class="flex items-center gap-2 text-amber-500 dark:text-amber-300">
      {{ i "triangle-alert" "w-4 h-4" }}
      <span class="font-medium">this branch has been updated, consider resubmitting</span>
    </div>
  </div>
  {{ end }}
{{ end }}