{{ define "repo/pulls/fragments/pullHeader" }}
  <header class="flex items-center gap-2 pb-2">
      {{ block "pullState" .Pull }} {{ end }}
      <h1 class="text-2xl dark:text-white">
          <span class="text-gray-500 dark:text-gray-400">#{{ .Pull.PullId }}</span>
          {{ .Pull.Title }}
      </h1>
  </header>

  <section class="">
    <div class="flex items-center gap-2">
      <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.IsPatchBased }}
          from
          <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">
            {{ if .Pull.IsForkBased }}
              {{ if .Pull.PullSource.Repo }}
              <a href="/{{ $owner }}/{{ .Pull.PullSource.Repo.Name }}" class="no-underline hover:underline">{{ $owner }}/{{ .Pull.PullSource.Repo.Name }}</a>:
              {{- else -}}
              <span class="italic">[deleted fork]</span>
              {{- end -}}
            {{- end -}}
            {{- .Pull.PullSource.Branch -}}
          </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 "singlePullHeader" }}
{{ end }}

{{ define "stackedPullHeader" }}
  <div class="border border-gray-200 dark:border-gray-700 rounded-sm">
    {{ block "stackedPullHeaderAbove" . }} {{ end }}
    <div class="p-2">
      {{ block "singlePullHeader"       . }} {{ end }}
    </div>
    {{ block "stackedPullHeaderBelow" . }} {{ end }}
  </div>
{{ end }}

{{ define "stackedPullHeaderAbove" }}
  {{ if .Pull.IsStacked }}
    {{ $above := .Stack.StrictlyAbove .Pull }}
    <div class="flex flex-col">
      {{ range $pull := $above }}
        <div class="border-b border-gray-200 dark:border-gray-700 p-2">
          {{ block "summarizedHeader" (list $pull $) }} {{ end }}
        </div>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "stackedPullHeaderBelow" }}
  {{ if .Pull.IsStacked }}
    {{ $below := .Stack.StrictlyBelow .Pull }}
    <div class="flex flex-col">
      {{ range $pull := $below }}
        <div class="border-t border-gray-200 dark:border-gray-700 p-2">
          {{ block "summarizedHeader" (list $pull $) }} {{ end }}
        </div>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

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

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

  <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 ">{{ .State.String }}</span>
  </div>
{{ end }}