{{ define "repo/pulls/fragments/pullHeader" }}
<header class="pb-4">
    <h1 class="text-2xl dark:text-white">
        {{ .Pull.Title | description }}
        <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 class="mt-2">
    <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 flex flex-wrap items-center gap-1">
            opened by
            {{ template "user/fragments/picHandleLink" .Pull.OwnerDid }}
            <span class="select-none before:content-['\00B7']"></span>
            {{ template "repo/fragments/time" .Pull.Created }}

            <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 }}
                  {{ $owner := resolve .Pull.PullSource.Repo.Did }}
                  <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-8 prose dark:prose-invert">
            {{ .Pull.Body | markdown }}
        </article>
    {{ end }}

    {{ with .OrderedReactionKinds }}
    <div class="flex items-center gap-2 mt-2">
        {{ template "repo/fragments/reactionsPopUp" . }}
        {{ range $kind := . }}
            {{ $reactionData := index $.Reactions $kind }}
            {{
                template "repo/fragments/reaction"
                (dict
                    "Kind"      $kind
                    "Count"     $reactionData.Count
                    "IsReacted" (index $.UserReacted $kind)
                    "ThreadAt"  $.Pull.PullAt
                    "Users"     $reactionData.Users)
            }}
        {{ end }}
    </div>
    {{ end }}
</section>


{{ end }}