{#each tabs as tab (tab.mode)} {/each}

{#if 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={targetBranch}
						placeholder={targetBranch ? undefined : "Target branch"}
						onSelect={onTargetBranch}
					/>
				{/snippet}
			</Field>

{#if source === "fork"}
				<Field label="Pull from" class="min-w-48">
					{#snippet children({ id })}
						<Select
							{id}
							options={forkOptions}
							value={fork}
							placeholder={fork ? undefined : "Select a fork"}
							disabled={forkDisabled}
							onSelect={onFork}
						/>
					{/snippet}
				</Field>
				{#if fork && forkBranchOptions.length > 0}
					<Field label="Branch" class="min-w-48">
						{#snippet children({ id })}
							<Select
								{id}
								{...branchSearch}
								label="Branch"
								options={forkBranchOptions}
								value={sourceBranch}
								placeholder={sourceBranch ? undefined : "Source branch"}
								onSelect={onSourceBranch}
							/>
						{/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={sourceBranch}
							placeholder={sourceBranch ? undefined : "Source branch"}
							onSelect={onSourceBranch}
						/>
					{/snippet}
				</Field>
			{/if}
		</div>
	{/if}
</div>