{$i18n.t('WebUI Settings')}

{$i18n.t('Theme')}

{#if theme === 'dark'} {:else if theme === 'light'} {/if}

{$i18n.t('Language')}

{$i18n.t('Desktop Notifications')}

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

</div>

<div class="mt-2 space-y-3 pr-1.5">
			<div class="flex justify-between items-center text-sm">
				<div class="  font-medium">{$i18n.t('Advanced Parameters')}</div>
				<button
					class=" text-xs font-medium text-gray-500"
					type="button"
					on:click={() => {
						showAdvanced = !showAdvanced;
					}}>{showAdvanced ? $i18n.t('Hide') : $i18n.t('Show')}</button
				>
			</div>

{#if showAdvanced}
				<AdvancedParams bind:options />
				<hr class=" dark:border-gray-700" />

<div class=" py-1 w-full justify-between">
					<div class="flex w-full justify-between">
						<div class=" self-center text-xs font-medium">{$i18n.t('Keep Alive')}</div>

<button
							class="p-1 px-3 text-xs flex rounded transition"
							type="button"
							on:click={() => {
								keepAlive = keepAlive === null ? '5m' : null;
							}}
						>
							{#if keepAlive === null}
								<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
							{:else}
								<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
							{/if}
						</button>
					</div>

{#if keepAlive !== null}
						<div class="flex mt-1 space-x-2">
							<input
								class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
								type="text"
								placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
								bind:value={keepAlive}
							/>
						</div>
					{/if}
				</div>

<div>
					<div class=" py-1 flex w-full justify-between">
						<div class=" self-center text-sm font-medium">{$i18n.t('Request Mode')}</div>

<button
							class="p-1 px-3 text-xs flex rounded transition"
							on:click={() => {
								toggleRequestFormat();
							}}
						>
							{#if requestFormat === ''}
								<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
							{:else if requestFormat === 'json'}
								
								<span class="ml-2 self-center"> {$i18n.t('JSON')} </span>
							{/if}
						</button>
					</div>
				</div>
			{/if}
		</div>
	</div>

<div class="flex justify-end pt-3 text-sm font-medium">
		<button
			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
			on:click={() => {
				saveSettings({
					system: system !== '' ? system : undefined,
					options: {
						seed: (options.seed !== 0 ? options.seed : undefined) ?? undefined,
						stop: options.stop !== '' ? options.stop.split(',').filter((e) => e) : undefined,
						temperature: options.temperature !== '' ? options.temperature : undefined,
						repeat_penalty: options.repeat_penalty !== '' ? options.repeat_penalty : undefined,
						repeat_last_n: options.repeat_last_n !== '' ? options.repeat_last_n : undefined,
						mirostat: options.mirostat !== '' ? options.mirostat : undefined,
						mirostat_eta: options.mirostat_eta !== '' ? options.mirostat_eta : undefined,
						mirostat_tau: options.mirostat_tau !== '' ? options.mirostat_tau : undefined,
						top_k: options.top_k !== '' ? options.top_k : undefined,
						top_p: options.top_p !== '' ? options.top_p : undefined,
						tfs_z: options.tfs_z !== '' ? options.tfs_z : undefined,
						num_ctx: options.num_ctx !== '' ? options.num_ctx : undefined,
						num_predict: options.num_predict !== '' ? options.num_predict : undefined
					},
					keepAlive: keepAlive ? (isNaN(keepAlive) ? keepAlive : parseInt(keepAlive)) : undefined
				});
				dispatch('save');
			}}
		>
			{$i18n.t('Save')}
		</button>
	</div>
</div>