{{ define "repo/pulls/fragments/pullStepDetails" }}
    {{ $hasSidePanel := and .LabelDefs .RepoInfo.Roles.IsPushAllowed }}
    {{ $labelCtx := dict "Defs" .LabelDefs "State" .LabelState "RepoInfo" .RepoInfo "Subject" "" "LoggedInUser" .LoggedInUser }}

    <section class="flex flex-col md:flex-row gap-6">
        <div class="flex-1 min-w-0 flex flex-col gap-4">
            {{ template "pullStepDetailsSingle" (dict "Root" .) }}
            {{ template "pullSubmitRow" . }}
        </div>

        {{ if $hasSidePanel }}
            <aside class="w-full md:w-72 md:flex-shrink-0 flex flex-col gap-6">
                {{ template "editBasicLabels" $labelCtx }}
                {{ template "editKvLabels" $labelCtx }}
            </aside>
        {{ end }}
    </section>
{{ end }}

{{ define "pullStepDetailsSingle" }}
    {{ $root := .Root }}
    <div class="flex flex-col gap-1">
        <label for="title" class="text-xs tracking-wide text-gray-800 dark:text-gray-200">Title</label>
        <input
            type="text"
            name="title"
            id="title"
            value="{{ $root.Title }}"
            class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700"
            placeholder="One-line summary of your change."
        />
    </div>

    {{ template "fragments/markdownEditor" (dict
        "Name" "body"
        "Value" $root.Body
        "Rows" 6
        "Placeholder" "Describe your change. Markdown is supported."
    ) }}
{{ end }}

{{ define "pullSubmitRow" }}
    <div class="flex items-center justify-end gap-4 mt-auto">
        {{ if and .MergeCheck .MergeCheck.IsConflicted }}
            <div class="flex items-center gap-2 text-sm">
                <span class="inline-flex items-center gap-1 text-red-600 dark:text-red-400">
                    {{ i "x" "w-4 h-4" }}
                    Can't automatically merge
                </span>
                <span class="text-gray-500 dark:text-gray-400">You can still create the pull request</span>
            </div>
        {{ else if and .MergeCheck .MergeCheck.Error }}
            <div class="flex items-center gap-2 text-sm text-red-600 dark:text-red-400">
                {{ i "triangle-alert" "w-4 h-4" }}
                Merge check failed
            </div>
        {{ end }}

        <button
            type="submit"
            class="btn-create flex items-center gap-2"
            hx-indicator="#create-pull-spinner"
        >
            {{ i "git-pull-request-create" "w-4 h-4" }}
            Create pull request
            <span id="create-pull-spinner" class="group">
                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
            </span>
        </button>
    </div>
{{ end }}