{{ define "title" }}pulls · {{ .RepoInfo.FullName }}{{ end }}

{{ define "repoContent" }}
    <div class="flex justify-between items-center">
        <p>
            filtering
            <select
                class="border px-1 bg-white border-gray-200"
                onchange="window.location.href = '/{{ .RepoInfo.FullName }}/pulls?state=' + this.value"
            >
                <option value="open" {{ if .FilteringBy.IsOpen }}selected{{ end }}>
                    open
                </option>
                <option value="merged" {{ if .FilteringBy.IsMerged }}selected{{ end }}>
                    merged
                </option>
                <option value="closed" {{ if .FilteringBy.IsClosed }}selected{{ end }}>
                    closed
                </option>
            </select>
            pull requests
        </p>
        <a
            href="/{{ .RepoInfo.FullName }}/pulls/new"
            class="btn text-sm flex items-center gap-2 no-underline hover:no-underline"
        >
            <i data-lucide="git-pull-request" class="w-5 h-5"></i>
            <span>new pull request</span>
        </a>
    </div>
    <div class="error" id="pulls"></div>
{{ end }}

{{ define "repoAfter" }}
    <div class="flex flex-col gap-2 mt-8">
        {{ range .Pulls }}
            <div class="rounded drop-shadow-sm bg-white px-6 py-4">
                <div class="pb-2">
                    <a href="/{{ $.RepoInfo.FullName }}/pulls/{{ .PullId }}">
                        {{ .Title }}
                        <span class="text-gray-500">#{{ .PullId }}</span>
                    </a>
                </div>
                <p class="text-sm text-gray-500">
                    {{ $bgColor := "bg-gray-800" }}
                    {{ $icon := "ban" }}

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


                    <span
                        class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }} text-sm"
                    >
                        <i
                            data-lucide="{{ $icon }}"
                            class="w-3 h-3 mr-1.5 text-white"
                        ></i>
                        <span class="text-white">{{ .State.String }}</span>
                    </span>

                    <span>
                        {{ $owner := index $.DidHandleMap .OwnerDid }}
                        <a href="/{{ $owner }}">{{ $owner }}</a>
                    </span>

                    <span class="before:content-['·']">
                        <time>
                            {{ .Created | timeFmt }}
                        </time>
                    </span>

                    <span class="before:content-['·']">
                        targeting branch
                        <span class="text-xs rounded bg-gray-100 text-black font-mono px-2 mx-1/2 inline-flex items-center">
                          {{ .TargetBranch }}
                        </span>
                    </span>
                </p>
            </div>
        {{ end }}
    </div>
{{ end }}