{#if view.prefillError}

{/if}

{@render stepNumber(1)}

Source

acting?.did ?? "", (did) => (picked = did)} label="Open as" disabled={save.loading} group="pull-compose" class="ml-auto" />

{@render tab("branch", "Compare branches", "Select a source branch")} {@render tab("fork", "Compare forks", "Select a fork and branch as the source")} {@render tab( "patch", "Paste patch", "Paste a git diff or git format-patch", true )}

{#if view.source === "patch"} {#snippet children({ id })}

</div>
				{:else}
					<div class="flex flex-col gap-3 md:flex-row md:flex-wrap">
						<Field label="Merge into" class="min-w-48">
							{#snippet children({ id })}
								<Select
									{id}
									{...branchSearch}
									label="Merge into"
									options={targetOptions}
									value={view.targetBranch}
									placeholder={view.targetBranch ? undefined : "Target branch"}
									onSelect={(value) => navigate({ targetBranch: value })}
								/>
							{/snippet}
						</Field>

{#if view.source === "fork"}
							<Field label="Pull from" class="min-w-48">
								{#snippet children({ id })}
									<Select
										{id}
										options={forkOptions}
										value={view.fork}
										placeholder={view.fork ? undefined : "Select a fork"}
										disabled={laneLoading}
										onSelect={(value) => navigate({ fork: value })}
									/>
								{/snippet}
							</Field>
							{#if view.fork && view.forkBranches.length > 0}
								<Field label="Branch" class="min-w-48">
									{#snippet children({ id })}
										<Select
											{id}
											{...branchSearch}
											label="Branch"
											options={forkBranchOptions}
											value={view.sourceBranch}
											placeholder={view.sourceBranch
												? undefined
												: "Source branch"}
											onSelect={(value) => navigate({ sourceBranch: value })}
										/>
									{/snippet}
								</Field>
							{:else}
								<p
									class="self-end typography-paragraph-small text-foreground-muted"
								>
									Select a fork first to view available branches
								</p>
							{/if}
						{:else}
							<Field label="Pull from" class="min-w-48">
								{#snippet children({ id })}
									<Select
										{id}
										{...branchSearch}
										label="Pull from"
										options={branchOptions}
										value={view.sourceBranch}
										placeholder={view.sourceBranch
											? undefined
											: "Source branch"}
										onSelect={(value) => navigate({ sourceBranch: value })}
									/>
								{/snippet}
							</Field>
						{/if}
					</div>
				{/if}
			</div>
		</section>

<section class="relative flex flex-col gap-3">
			<div class="{connector} -top-6"></div>
			<div class="relative flex items-center gap-4">
				<div class="relative z-10 shrink-0">{@render stepNumber(2)}</div>
				<h3
					class="my-0 typography-paragraph-small font-bold tracking-wide text-foreground-default"
				>
					Review
				</h3>
			</div>
			<div class="ml-10 flex flex-col gap-3">
				{#if !view.showDetails}
					{@render notice(
						view.source === "patch"
							? "Paste a patch above to see a comparison."
							: "Pick a source and target above to see a comparison."
					)}
				{:else if view.source === "patch"}
					
				{:else if view.commitsError}
					{@render notice(view.commitsError, true)}
				{:else if view.commits.length === 0}
					{@render notice(
						view.sourceBranch === view.targetBranch
							? "Source and target are the same branch, nothing to merge."
							: "No commits between target and source. Make sure your source branch has commits not on the target."
					)}
				{:else}
					<div
						class="flex min-w-0 items-center justify-between gap-3 typography-paragraph-small text-foreground-muted"
					>
						<span class="shrink-0">
							{formatCount(view.commits.length)}
							{view.commits.length === 1 ? "commit" : "commits"}
						</span>
						<span
							class="inline-flex items-center gap-2 truncate typography-monospace-small text-foreground-subtle"
						>
							<span>{view.targetBranch}</span>
							<ArrowLeftRight class="size-4 shrink-0" aria-hidden="true" />
							<span>{view.sourceBranch}</span>
						</span>
					</div>
					<ul class="m-0 flex list-none flex-col gap-2 p-0">
						{#each view.commits as commit (commit.hash)}
							<li
								class="flex items-center gap-3 rounded-sm border border-border-default bg-background-default px-3 py-2"
							>
								<GitCommitVertical
									class="size-4 shrink-0 text-foreground-subtle"
									aria-hidden="true"
								/>
								<span class="min-w-0 flex-1 truncate typography-paragraph-small">
									{commit.subject}
								</span>
								<span
									class="flex shrink-0 items-center gap-2 typography-paragraph-small text-foreground-muted"
								>
									{#if commit.when}<TimeAgo value={commit.when} />{/if}
									<code
										class="rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small"
									>
										{commit.shortHash}
									</code>
								</span>
								<span class="-my-2 w-px self-stretch bg-border-default"></span>
								<span class="flex shrink-0 items-center gap-1">
									<button
										type="button"
										class="cursor-pointer rounded-sm p-1 text-foreground-subtle hover:bg-background-muted"
										title="Copy SHA"
										onclick={() => copySha(commit.hash)}
									>
										{#if copied === commit.hash}
											<CopyCheck class="size-4" aria-hidden="true" />
										{:else}
											<Copy class="size-4" aria-hidden="true" />
										{/if}
									</button>
									<a
										href={resolve(
											`/${view.sourceRepoPath}/tree/${commit.hash}` as "/"
										)}
										class="rounded-sm p-1 text-foreground-subtle hover:bg-background-muted"
										title="Browse repository at this commit"
									>
										<FolderCode class="size-4" aria-hidden="true" />
									</a>
								</span>
							</li>
						{/each}
					</ul>
					<div
						class="rounded-sm border border-border-default bg-background-subtle px-4 py-6 text-center typography-paragraph-small text-foreground-muted"
					>
						Diff preview (TODO)
					</div>
				{/if}
			</div>
		</section>

{#if view.showDetails}
			<section class="relative flex flex-col gap-3">
				<div
					class="{connector} -top-6 -bottom-12 mask-[linear-gradient(to_bottom,black_calc(100%-1.5rem),transparent)]"
				></div>
				<div class="relative flex items-center gap-4">
					<div class="relative z-10 shrink-0">{@render stepNumber(3)}</div>
					<h3
						class="my-0 typography-paragraph-small font-bold tracking-wide text-foreground-default"
					>
						Details
					</h3>
				</div>
				<div class="ml-10 flex flex-col gap-4">
					<Field label="Title" required>
						{#snippet children({ id })}
							<Input
								{id}
								name="title"
								required
								bind:value={title}
								disabled={save.loading}
								placeholder="One-line summary of your change."
							/>
						{/snippet}
					</Field>

<Field label="Body">
						{#snippet children({ id })}
							<MarkdownEditor
								{id}
								name="body"
								rows={6}
								placeholder="Describe your change. Markdown is supported."
								{markup}
								bind:value={body}
								disabled={save.loading}
							/>
						{/snippet}
					</Field>

<div class="flex items-center justify-end">
						<Button
							type="submit"
							variant="primary"
							icon={save.loading ? Spinner : GitPullRequestCreate}
							disabled={!canSubmit}
						>
							Create pull request
						</Button>
					</div>
				</div>
			</section>
		{/if}
	</form>
</div>