{$i18n.t('Edit Prompt')}

{$i18n.t('Prompt Content')}

</div>
			</div>

<div class="my-2">
				<div class="text-gray-500 text-xs">{$i18n.t('Commit Message')} ({$i18n.t('optional')})</div>
				<div class="mt-1">
					<input
						class="text-sm w-full bg-transparent outline-hidden"
						placeholder={$i18n.t('Describe what changed...')}
						bind:value={commitMessage}
					/>
				</div>
			</div>

<div class="mt-4 flex items-center justify-between">
				<label class="flex items-center gap-2 cursor-pointer">
					<input
						type="checkbox"
						bind:checked={isProduction}
						class="w-4 h-4 rounded border-gray-300 dark:border-gray-600"
					/>
					<span class="text-sm text-gray-700 dark:text-gray-300"
						>{$i18n.t('Set as Production')}</span
					>
				</label>
				<div>
					<button
						class="text-sm px-4 py-2 transition rounded-full {loading
							? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
							: 'bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'} flex justify-center"
						type="submit"
						disabled={loading}
					>
						<div class="font-medium">{$i18n.t('Save')}</div>
						{#if loading}
							<div class="ml-1.5">
								<Spinner />
							</div>
						{/if}
					</button>
				</div>
			</div>
		</form>
	</div>
</Modal>

{#if edit}
	
	<div class="flex flex-col w-full h-full max-h-[100dvh]">
		
		<div class="flex items-start justify-between gap-4 shrink-0">
			<div class="min-w-0 flex-1">
				<input
					class="text-2xl w-full bg-transparent outline-hidden"
					placeholder={$i18n.t('Prompt Name')}
					bind:value={name}
					on:input={debouncedSaveMetadata}
					{disabled}
				/>

<div>
				<div class="flex items-center gap-2 shrink-0 justify-end">
					{#if !disabled}
						<button
							class="px-4 py-1 text-sm font-medium bg-black text-white dark:bg-white dark:text-black rounded-full hover:opacity-90 transition shadow-xs"
							on:click={() => (showEditModal = true)}
						>
							{$i18n.t('Edit')}
						</button>

<button
							class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2.5 py-1 rounded-full flex gap-1.5 items-center text-sm border border-gray-100 dark:border-gray-800"
							on:click={() => (showAccessControlModal = true)}
						>
							<LockClosed strokeWidth="2.5" className="size-3.5" />
							{$i18n.t('Access')}
						</button>
					{:else}
						<span class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
							>{$i18n.t('Read Only')}</span
						>
					{/if}
				</div>

<div class="mt-1.5">
					<Tooltip content={$i18n.t('Click to copy ID')}>
						<button
							class="text-xs text-gray-500 font-mono px-2 py-1 rounded-lg cursor-pointer hover:underline transition"
							on:click={() => {
								copyToClipboard(prompt.id);
								toast.success($i18n.t('ID copied to clipboard'));
							}}
						>
							{prompt.id}
						</button>
					</Tooltip>
				</div>
			</div>
		</div>

<div class="mb-2 flex justify-between items-center gap-2">
			<div class="flex-1 min-w-0">
				<Tags
					{tags}
					{disabled}
					{suggestionTags}
					on:add={(e) => {
						tags = [...tags, { name: e.detail }];
						debouncedSaveMetadata();
					}}
					on:delete={(e) => {
						tags = tags.filter((tag) => tag.name !== e.detail);
						debouncedSaveMetadata();
					}}
				/>
			</div>
		</div>

<div class="flex flex-col md:flex-row gap-4 flex-1 overflow-hidden pb-6">
			
			<div class="hidden md:flex md:flex-col w-72 shrink-0 overflow-hidden">
				<div class="flex-1 overflow-y-auto">
					{@render historySection()}
				</div>
			</div>

<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
				<div class="flex items-center justify-between mb-1 shrink-0">
					<div class="flex items-center gap-2">
						<div class="text-gray-500 text-xs">
							{$i18n.t('Prompt Content')}
						</div>
						{#if selectedHistoryEntry}
							<span
								class="text-xs text-gray-500 font-mono bg-gray-100 dark:bg-gray-800 px-1.5 rounded"
							>
								{selectedHistoryEntry.id.slice(0, 7)}
							</span>
						{/if}
					</div>

{#if selectedHistoryEntry && !disabled}
						<div class="flex items-center gap-2">
							{#if selectedHistoryEntry.id === prompt?.version_id}
								<Badge type="success" content={$i18n.t('Live')} />
							{:else}
								<button
									class="text-xs text-gray-500 hover:text-gray-900 dark:hover:text-gray-300 hover:underline transition"
									on:click={() => setAsProduction(selectedHistoryEntry)}
								>
									{$i18n.t('Set as Production')}
								</button>
							{/if}
							<PromptHistoryMenu
								isProduction={selectedHistoryEntry.id === prompt?.version_id}
								onDelete={() => handleDeleteHistory(selectedHistoryEntry.id)}
								onClose={() => {}}
							/>
						</div>
					{/if}
				</div>
				
				<div class="relative flex-1 min-h-0">
					
					<div class="absolute top-2 right-2 z-10">
						<button
							class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
							on:click={copyContent}
						>
							{#if contentCopied}
								<Check className="size-4 text-green-500" />
							{:else}
								<Clipboard className="size-4 text-gray-500" />
							{/if}
						</button>
					</div>
					
					<div
						class="bg-gray-50 dark:bg-gray-900 rounded-xl px-4 py-3 border border-gray-100/50 dark:border-gray-850/50 h-full overflow-y-auto"
					>
						<pre class="text-xs whitespace-pre-wrap font-mono pr-8">{selectedHistoryEntry?.snapshot
								?.content || content}</pre>
					</div>
				</div>
			</div>
		</div>
	</div>
{:else}
	
	<div class="w-full max-h-full flex justify-center">
		<form class="flex flex-col w-full mb-10" on:submit|preventDefault={submitHandler}>
			<div class="mb-2">
				<Tooltip
					content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t('Activate this command by typing "/{{COMMAND}}" to chat input.', { COMMAND: command })}`}
					placement="bottom-start"
				>
					<div class="flex flex-col w-full">
						<div class="flex items-center">
							<input
								class="text-2xl w-full bg-transparent outline-hidden"
								placeholder={$i18n.t('Name')}
								bind:value={name}
								required
							/>
							<div class="self-center shrink-0">
								<button
									class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
									type="button"
									on:click={() => (showAccessControlModal = true)}
								>
									<LockClosed strokeWidth="2.5" className="size-3.5" />
									<div class="text-sm font-medium shrink-0">{$i18n.t('Access')}</div>
								</button>
							</div>
						</div>
						<div class="flex gap-0.5 items-center text-xs text-gray-500">
							<div>/</div>
							<input
								class="w-full bg-transparent outline-hidden"
								placeholder={$i18n.t('Command')}
								bind:value={command}
								on:input={handleCommandInput}
								required
							/>
						</div>

<div class="mt-1">
							<Tags
								{tags}
								{suggestionTags}
								on:add={(e) => {
									tags = [...tags, { name: e.detail }];
								}}
								on:delete={(e) => {
									tags = tags.filter((tag) => tag.name !== e.detail);
								}}
							/>
						</div>
					</div>
				</Tooltip>
			</div>

<div class="my-2">
				<div class="text-gray-500 text-xs">{$i18n.t('Prompt Content')}</div>
				<div class="mt-1">
					<Textarea
						className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
						placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
						bind:value={content}
						rows={6}
						required
					/>
					<div class="text-xs text-gray-400 dark:text-gray-500">
						ⓘ {$i18n.t('Use')}
						<span class="font-medium text-gray-600 dark:text-gray-300"
							>{'{{'}{$i18n.t('variable')}{'}}'}</span
						>
						{$i18n.t('for placeholders')}
					</div>
				</div>
			</div>

<div class="my-4 flex justify-end pb-20">
				<button
					class="text-sm w-full lg:w-fit px-4 py-2 transition rounded-xl bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black flex w-full justify-center"
					type="submit"
					disabled={loading}
				>
					<div class="font-medium">{$i18n.t('Save & Create')}</div>
					{#if loading}
						<div class="ml-1.5">
							<Spinner />
						</div>
					{/if}
				</button>
			</div>
		</form>
	</div>
{/if}

{#snippet historySection()}
	<div class="flex flex-col h-full">
		<div class="flex items-center justify-between mb-2 shrink-0">
			<div class="text-gray-500 text-xs">{$i18n.t('History')}</div>
		</div>

{#if history.length > 0}
			<div class="space-y-0 flex-1 overflow-y-auto" on:scroll={handleHistoryScroll}>
				{#each history as entry, index}
					<div class="flex">
						
						<button
							class="flex-1 text-left px-3.5 py-2 mb-1 rounded-2xl transition group
								{selectedHistoryEntry?.id === entry.id
								? 'bg-gray-100/50 dark:bg-gray-850/50'
								: 'hover:bg-gray-100/50 dark:hover:bg-gray-850/50'}"
							on:click={() => (selectedHistoryEntry = entry)}
						>
							
							<div class="flex items-center gap-2 mb-1">
								<div class="text-xs text-gray-900 dark:text-white truncate">
									{entry.commit_message || $i18n.t('Update')}
								</div>
								{#if entry.id === prompt?.version_id}
									<Badge type="success" content={$i18n.t('Live')} />
								{/if}
							</div>

<div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
								{#if entry.user}
									<img
										src={`/api/v1/users/${entry.user.id}/profile/image`}
										alt={entry.user.name}
										class="size-3 rounded-full mr-0.5"
										on:error={(e) => (e.target.src = '/user.png')}
									/>
									<span class="truncate">{entry.user.name}</span>
									<span>•</span>
								{/if}
								<span class="shrink-0">{renderDate(entry.created_at)}</span>
							</div>
						</button>
					</div>
				{/each}

{#if historyLoading}
					<div class="flex justify-center py-2">
						<Spinner className="size-3" />
					</div>
				{/if}
			</div>
		{:else if !historyLoading}
			<div class="text-xs text-gray-400 text-center py-6 italic">
				{$i18n.t('No history available')}
			</div>
		{/if}
	</div>
{/snippet}