{#if ollamaVersion}

{$i18n.t('Manage Ollama Models')}

{#if OLLAMA_URLS.length > 1}

{/if}

{$i18n.t('Pull a model from Ollama.com')}

{$i18n.t('To access the available model names for downloading,')} {$i18n.t('click here.')}

{#if Object.keys(modelDownloadStatus).length > 0} {#each Object.keys(modelDownloadStatus) as model}

{model}

{modelDownloadStatus[model].pullProgress ?? 0}%

{modelDownloadStatus[model].digest}

{/each} {/if}

{$i18n.t('Delete a model')}

{$i18n.t('Experimental')}

{#if showExperimentalOllama}

{ uploadModelHandler(); }} >

{$i18n.t('Upload a GGUF model')}

{#if modelUploadMode === 'file'}

{ console.log(modelInputFile); }} accept=".gguf,.safetensors" required hidden />

{:else}

{/if}

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')} {/if}

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}

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

</div>
								</div>
							{/if}
							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
								{$i18n.t('To access the GGUF models available for downloading,')}
								<a
									class=" text-gray-500 dark:text-gray-300 font-medium underline"
									href="https://huggingface.co/models?search=gguf"
									target="_blank">{$i18n.t('click here.')}</a
								>
							</div>

{#if uploadProgress !== null}
								<div class="mt-2">
									<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>

<div class="w-full rounded-full dark:bg-gray-800">
										<div
											class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
											style="width: {Math.max(15, uploadProgress ?? 0)}%"
										>
											{uploadProgress ?? 0}%
										</div>
									</div>
									<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
										{modelFileDigest}
									</div>
								</div>
							{/if}
						</form>
					{/if}
				</div>
			</div>
			<hr class=" dark:border-gray-700 my-2" />
		{/if}

<div class=" space-y-3">
			<div class="mt-2 space-y-3 pr-1.5">
				<div>
					<div class=" mb-2 text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div>

<div>
						<div class="flex justify-between items-center text-xs">
							<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div>
							<button
								class=" text-xs font-medium text-gray-500"
								type="button"
								on:click={() => {
									showLiteLLMParams = !showLiteLLMParams;
								}}
								>{showLiteLLMParams
									? $i18n.t('Hide Additional Params')
									: $i18n.t('Show Additional Params')}</button
							>
						</div>
					</div>

<button
								class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
								on:click={() => {
									addLiteLLMModelHandler();
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
										d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
									/>
								</svg>
							</button>
						</div>

{#if showLiteLLMParams}
							<div>
								<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
											placeholder="Enter Model Name (model_name)"
											bind:value={liteLLMModelName}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>

<div>
								<div class="mb-1.5 text-sm font-medium">Max Tokens</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
											placeholder="Enter Max Tokens (litellm_params.max_tokens)"
											bind:value={liteLLMMaxTokens}
											type="number"
											min="1"
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						{/if}
					</div>

<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
						{$i18n.t('Not sure what to add?')}
						<a
							class=" text-gray-300 font-medium underline"
							href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
							target="_blank"
						>
							{$i18n.t('Click here for help')}
						</a>
					</div>

<div>
						<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Delete a model')}</div>
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<select
									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
									bind:value={deleteLiteLLMModelId}
									placeholder={$i18n.t('Select a model')}
								>
									{#if !deleteLiteLLMModelId}
										<option value="" disabled selected>{$i18n.t('Select a model')}</option>
									{/if}
									{#each liteLLMModelInfo as model}
										<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700"
											>{model.model_name}</option
										>
									{/each}
								</select>
							</div>
							<button
								class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
								on:click={() => {
									deleteLiteLLMModelHandler();
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
										fill-rule="evenodd"
										d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
										clip-rule="evenodd"
									/>
								</svg>
							</button>
						</div>
					</div>
				</div>
			</div>

<!-- <div class="mt-2 space-y-3 pr-1.5">
				<div>
					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Add LiteLLM Model')}</div>
					<div class="flex w-full mb-2">
						<div class="flex-1">
							<input
								class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
								placeholder="Enter LiteLLM Model (e.g. ollama/mistral)"
								bind:value={liteLLMModel}
								autocomplete="off"
							/>
						</div>
					</div>

<div class="flex justify-between items-center text-sm">
						<div class="  font-medium">{$i18n.t('Advanced Model Params')}</div>
						<button
							class=" text-xs font-medium text-gray-500"
							type="button"
							on:click={() => {
								showLiteLLMParams = !showLiteLLMParams;
							}}>{showLiteLLMParams ? 'Hide' : 'Show'}</button
						>
					</div>

{#if showLiteLLMParams}
						<div>
							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API Key')}</div>
							<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter LiteLLM API Key (e.g. os.environ/AZURE_API_KEY_CA)"
										bind:value={liteLLMAPIKey}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>

<div>
							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API Base URL')}</div>
							<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter LiteLLM API Base URL"
										bind:value={liteLLMAPIBase}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>

<div>
							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API RPM')}</div>
							<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter LiteLLM API RPM"
										bind:value={liteLLMRPM}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>
					{/if}

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
						Not sure what to add?
						<a
							class=" text-gray-300 font-medium underline"
							href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
							target="_blank"
						>
							Click here for help.
						</a>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</div>