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

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

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

    {{ if .Pull.State.IsOpen }}
        {{ $bgColor = "bg-green-600" }}
        {{ $icon = "git-pull-request" }}
    {{ else if .Pull.State.IsMerged }}
        {{ $bgColor = "bg-purple-600" }}
        {{ $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
                    data-lucide="{{ $icon }}"
                    class="w-4 h-4 mr-1.5 text-white"
                ></i>
                <span class="text-white">{{ .Pull.State.String }}</span>
            </div>
            <span class="text-gray-400 text-sm">
                opened by
                {{ $owner := didOrHandle .Pull.OwnerDid .PullOwnerHandle }}
                <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>
                <time>targeting branch {{ .Pull.TargetBranch }}</time>
            </span>
        </div>

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

    <div class="flex flex-col justify-end mt-4">
        <details>
            <summary
                class="list-none cursor-pointer sticky top-0 bg-white rounded-sm px-3 py-2 border border-gray-200 flex items-center text-gray-700 hover:bg-gray-50 transition-colors mt-auto"
            >
                <i data-lucide="code" class="w-4 h-4 mr-2"></i>
                <span>patch</span>
            </summary>
            <div class="relative">
                <pre
                    id="patch-preview"
                    class="font-mono overflow-x-scroll bg-gray-50 p-4 rounded-b border border-gray-200 text-sm"
                >
       {{- .Pull.Patch -}}
                </pre
                >
                <form
                    id="patch-form"
                    hx-patch="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/patch"
                    hx-swap="none"
                >
                    <textarea
                        id="patch"
                        name="patch"
                        class="font-mono w-full h-full p-4 rounded-b border border-gray-200 text-sm hidden"
                    >
{{- .Pull.Patch -}}</textarea
                    >

                    <div class="flex gap-2 justify-end mt-2">
                        <button
                            id="edit-patch-btn"
                            type="button"
                            class="btn btn-sm"
                            onclick="togglePatchEdit(true)"
                            {{ if or .Pull.State.IsMerged .Pull.State.IsClosed }}
                                disabled title="Cannot edit closed or merged
                                pull requests"
                            {{ end }}
                        >
                            <i data-lucide="edit" class="w-4 h-4 mr-1"></i>Edit
                        </button>
                        <button
                            id="save-patch-btn"
                            type="submit"
                            class="btn btn-sm bg-green-500 hidden"
                        >
                            <i data-lucide="save" class="w-4 h-4 mr-1"></i>Save
                        </button>
                        <button
                            id="cancel-patch-btn"
                            type="button"
                            class="btn btn-sm bg-gray-300 hidden"
                            onclick="togglePatchEdit(false)"
                        >
                            Cancel
                        </button>
                    </div>
                </form>

                <div id="pull-error" class="error"></div>
                <div id="pull-success" class="success"></div>
            </div>
            <script>
                function togglePatchEdit(editMode) {
                    const preview = document.getElementById("patch-preview");
                    const editor = document.getElementById("patch");
                    const editBtn = document.getElementById("edit-patch-btn");
                    const saveBtn = document.getElementById("save-patch-btn");
                    const cancelBtn =
                        document.getElementById("cancel-patch-btn");

                    if (editMode) {
                        preview.classList.add("hidden");
                        editor.classList.remove("hidden");
                        editBtn.classList.add("hidden");
                        saveBtn.classList.remove("hidden");
                        cancelBtn.classList.remove("hidden");
                    } else {
                        preview.classList.remove("hidden");
                        editor.classList.add("hidden");
                        editBtn.classList.remove("hidden");
                        saveBtn.classList.add("hidden");
                        cancelBtn.classList.add("hidden");
                    }
                }

                document
                    .getElementById("save-patch-btn")
                    .addEventListener("click", function () {
                        togglePatchEdit(false);
                    });
            </script>
        </details>
    </div>
{{ end }}

{{ define "repoAfter" }}
    <section id="comments" class="mt-8 space-y-4 relative">
        {{ range $index, $comment := .Comments }}
            <div
                id="comment-{{ .CommentId }}"
                class="rounded bg-white p-4 relative"
            >
                {{ if eq $index 0 }}
                    <div
                        class="absolute left-8 -top-8 w-px h-8 bg-gray-300"
                    ></div>
                {{ else }}
                    <div
                        class="absolute left-8 -top-4 w-px h-4 bg-gray-300"
                    ></div>
                {{ end }}
                <div class="flex items-center gap-2 mb-2 text-gray-400">
                    {{ $owner := index $.DidHandleMap .OwnerDid }}
                    <span class="text-sm">
                        <a
                            href="/{{ $owner }}"
                            class="no-underline hover:underline"
                            >{{ $owner }}</a
                        >
                    </span>
                    <span
                        class="px-1 select-none before:content-['\00B7']"
                    ></span>
                    <a
                        href="#{{ .CommentId }}"
                        class="text-gray-500 text-sm hover:text-gray-500 hover:underline no-underline"
                        id="{{ .CommentId }}"
                    >
                        {{ .Created | timeFmt }}
                    </a>
                </div>
                <div class="prose">
                    {{ .Body | markdown }}
                </div>
            </div>
        {{ end }}

        {{ if .Pull.State.IsMerged }}
            <div
                id="merge-status-card"
                class="rounded relative bg-purple-50 border border-purple-200 p-4"
            >
                {{ if gt (len .Comments) 0 }}
                    <div
                        class="absolute left-8 -top-4 w-px h-4 bg-gray-300"
                    ></div>
                {{ else }}
                    <div
                        class="absolute left-8 -top-8 w-px h-8 bg-gray-300"
                    ></div>
                {{ end }}


                <div class="flex items-center gap-2 text-purple-500">
                    <i data-lucide="git-merge" class="w-4 h-4"></i>
                    <span class="font-medium"
                        >Pull request successfully merged</span
                    >
                </div>

                <div class="mt-2 text-sm text-gray-700">
                    <p>
                        This pull request has been merged into the base branch.
                    </p>
                </div>
            </div>
        {{ else if .MergeCheck }}
            <div
                id="merge-status-card"
                class="rounded relative {{ if .MergeCheck.IsConflicted }}
                    bg-red-50 border border-red-200
                {{ else }}
                    bg-green-50 border border-green-200
                {{ end }} p-4"
            >
                {{ if gt (len .Comments) 0 }}
                    <div
                        class="absolute left-8 -top-4 w-px h-4 bg-gray-300"
                    ></div>
                {{ else }}
                    <div
                        class="absolute left-8 -top-8 w-px h-8 bg-gray-300"
                    ></div>
                {{ end }}


                <div
                    class="flex items-center gap-2 {{ if .MergeCheck.IsConflicted }}
                        text-red-500
                    {{ else }}
                        text-green-500
                    {{ end }}"
                >
                    {{ if .MergeCheck.IsConflicted }}
                        <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                        <span class="font-medium"
                            >merge conflicts detected</span
                        >
                    {{ else }}
                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                        <span class="font-medium">ready to merge</span>
                    {{ end }}
                </div>

                {{ if .MergeCheck.IsConflicted }}
                    <div class="mt-2">
                        <ul class="text-sm space-y-1">
                            {{ range .MergeCheck.Conflicts }}
                                <li class="flex items-center">
                                    <i
                                        data-lucide="file-warning"
                                        class="w-3 h-3 mr-1.5 text-red-500"
                                    ></i>
                                    <span class="font-mono"
                                        >{{ slice .Filename 0 (sub (len .Filename) 2) }}</span
                                    >
                                </li>
                            {{ end }}
                        </ul>
                    </div>
                    <div class="mt-3 text-sm text-gray-700">
                        <p>
                            Please resolve these conflicts locally and update
                            the patch to continue with the merge.
                        </p>
                    </div>
                {{ else }}
                    <div class="mt-2 text-sm text-gray-700">
                        <p>
                            No conflicts detected with the base branch. This
                            pull request can be merged safely.
                        </p>
                    </div>
                    {{ if and .LoggedInUser (eq .LoggedInUser.Did .RepoInfo.OwnerDid) }}
                        <div class="mt-4 flex items-center gap-2">
                            <form
                                hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/merge"
                                hx-swap="none"
                            >
                                <input
                                    type="hidden"
                                    name="targetBranch"
                                    value="{{ .Pull.TargetBranch }}"
                                />
                                <input
                                    type="hidden"
                                    name="patch"
                                    value="{{ .Pull.Patch }}"
                                />
                                <button
                                    type="submit"
                                    class="btn flex items-center gap-2"
                                    {{ if or .Pull.State.IsClosed .MergeCheck.IsConflicted }}
                                        disabled
                                    {{ end }}
                                >
                                    <i
                                        data-lucide="git-merge"
                                        class="w-4 h-4 text-purple-500"
                                    ></i>
                                    <span>merge</span>
                                </button>
                            </form>

                            {{ if or (eq .LoggedInUser.Did .Pull.OwnerDid) (eq .LoggedInUser.Did .RepoInfo.OwnerDid) }}
                                {{ $action := "close" }}
                                {{ $icon := "circle-x" }}
                                {{ $hoverColor := "red" }}
                                {{ if .Pull.State.IsClosed }}
                                    {{ $action = "reopen" }}
                                    {{ $icon = "circle-dot" }}
                                    {{ $hoverColor = "green" }}
                                {{ end }}
                                <form
                                    hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/{{ $action }}"
                                    hx-swap="none"
                                >
                                    <button
                                        type="submit"
                                        class="btn flex items-center gap-2"
                                    >
                                        <i
                                            data-lucide="{{ $icon }}"
                                            class="w-4 h-4 text-{{ $hoverColor }}-400"
                                        ></i>
                                        <span>{{ $action }}</span>
                                    </button>
                                </form>
                                <div id="pull-merge-error" class="error"></div>
                                <div
                                    id="pull-merge-success"
                                    class="success"
                                ></div>
                            {{ end }}
                        </div>
                    {{ end }}
                {{ end }}
            </div>
        {{ end }}
    </section>

    {{ if .LoggedInUser }}
        <form
            hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/comment"
            class="mt-8"
            hx-swap="none"
        >
            <textarea
                name="body"
                class="w-full p-2 rounded border border-gray-200"
                placeholder="Add to the discussion..."
            ></textarea>
            <button type="submit" class="btn mt-2">comment</button>
            <div id="pull-comment"></div>
        </form>
    {{ end }}

    {{ if and (or (eq .LoggedInUser.Did .Pull.OwnerDid) (eq .LoggedInUser.Did .RepoInfo.OwnerDid)) (not .MergeCheck) (not .Pull.State.IsMerged) }}
        {{ $action := "close" }}
        {{ $icon := "circle-x" }}
        {{ $hoverColor := "red" }}
        {{ if .Pull.State.IsClosed }}
            {{ $action = "reopen" }}
            {{ $icon = "circle-dot" }}
            {{ $hoverColor = "green" }}
        {{ end }}
        <form
            hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/{{ $action }}"
            hx-swap="none"
            class="mt-8"
        >
            <button type="submit" class="btn text-sm flex items-center gap-2">
                <i
                    data-lucide="{{ $icon }}"
                    class="w-4 h-4 mr-2 text-{{ $hoverColor }}-400"
                ></i>
                <span class="text-black">{{ $action }}</span>
            </button>
        </form>
    {{ end }}


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