{% extends "/layouts/main.twig" %}
{% set active_menu = '/admin/settings' %}

{% set llm = config.model.registry.directory|filter(service => service.key == id)|first %}
{% if llm is not empty and environment == 'demo' %}
	{% set llm = llm|merge({'api_key': 'hidden-in-demo'}) %}
{% endif %}

{% set xdata %}
llm({{ (llm ?: {'key': id})|json_encode }})
{% endset %}
{% block title (llms is defined ? p__('title', 'Edit LLM Server') ~ ': ' ~ llms.name : p__('title', 'New LLM Server'))|title %}

{% block template %}
	<div>
		{% include "snippets/back.twig" with {link: 'admin/settings', label: 'Settings'} %}

		<h1 class="mt-4">
			{{ llms is defined ? p__('heading', 'Edit LLM Server') ~ ': '  : p__('heading', 'New LLM Server') }}

			{% if llms is defined %}
				<span class="font-normal text-intermediate-content">{{ llms.name	}}</span>
			{% endif %}
		</h1>

		{% if llms is defined %}
			<div class="mt-2">
				<x-uuid>{{ id }}</x-uuid>
			</div>
		{% endif %}
	</div>

	<x-form>
		<form class="flex flex-col gap-8" @submit.prevent="submit" x-ref="form">
			<div class="flex flex-col gap-2">
				<section class="flex flex-col gap-6 box" data-density="comfortable">
					<h2>{{ p__('heading', 'API Server') }}</h2>

					<div>
						<label for="host">
							{{ p__('label', 'Name') }}
						</label>

						<input class="mt-2 input" type="text" id="name" autocomplete="off" placeholder="Groq" x-model="llm.name" required @input="setLlmKey(llm.name)" x-init="setLlmKey(llm.name)">

						<ul class="info mt-2">
							<li>
								{{ __('Will be used as the name of the LLM server in the UI') }}
							</li>
						</ul>
					</div>

					<div>
						<label for="host">
							{{ p__('label', 'Server address') }}
						</label>

						<input class="mt-2 input" type="url" id="host" autocomplete="off" placeholder="https://api.groq.com/openai/v1" x-model="llm.server" required>

						<ul class="info mt-2">
							<li>
								{{ __('The server address must include the complete base URL including API version if required. Example: https://api.groq.com/openai/v1') }}
							</li>
							<li>
								{{ __('The app will automatically append endpoints like /chat/completions or /models to this base URL') }}
							</li>
							<li>
								{{ __('API version (like /v1 or /v1beta) must be included in the server address if required by the provider') }}
							</li>
						</ul>
					</div>

					<div>
						<label for="key">
							{{ p__('label', 'API key / Authorization token') }}
						</label>

						<div class="relative mt-2" x-data="{isVisible: false}">
							<input class="input pe-11" type="password" :type="isVisible ? 'text' : 'password'" id="key" autocomplete="off" value="{{ environment == 'demo' ? 'hidden-in-demo' : (llms.key ?? '') }}" x-model.fill="llm.api_key">

							<button type="button" class="absolute end-3 top-1/2 text-2xl -translate-y-1/2 text-content-dimmed" @click="isVisible = !isVisible">
								<i class="block ti" :class="{'ti-eye-closed' : isVisible, 'ti-eye':!isVisible}"></i>
							</button>
						</div>

						<ul class="info mt-2">
							<li>
								{{ __('The API key will be included in the Authorization header as a Bearer token. Example: Authorization: Bearer {{key}}') }}
							</li>
						</ul>
					</div>
				</section>

				<section class="flex flex-col gap-6 box" data-density="comfortable">
					<h2>{{ p__('heading', 'Headers') }}</h2>

					<div class="grid grid-cols-2 gap-6">
						<div>
							<label>
								{{ p__('label', 'Key') }}
							</label>

							<input class="mt-2 input" type="text" autocomplete="off" value="Content-Type" disabled>
						</div>

						<div>
							<label>
								{{ p__('label', 'Value') }}
							</label>

							<input class="mt-2 input" type="text" autocomplete="off" value="application/json" disabled>
						</div>
					</div>

					<template x-if="llm.api_key && llm.api_key.trim()">
						<div>
							<div class="grid grid-cols-2 gap-6">
								<div>
									<label>
										{{ p__('label', 'Key') }}
									</label>

									<input class="mt-2 input" type="text" autocomplete="off" value="Authorization" disabled>
								</div>

								<div>
									<label>
										{{ p__('label', 'Value') }}
									</label>

									<input class="mt-2 input" type="text" autocomplete="off" :value="maskAuthKey(llm.api_key)" disabled>
								</div>
							</div>

							<ul class="info mt-2">
								<li>
									{{ __('This Authorization header will be added automatically with Bearer token. If the server requires different type of Authorization header, you can add it manually below.') }}
								</li>
							</ul>
						</div>
					</template>

					<template x-for="(header, index) in llm.headers">
						<div class="pt-6 border-t border-dashed border-line">
							<div class="grid relative grid-cols-2 gap-6">
								<div>
									<label :for="`headers[${index}][key]`">
										{{ p__('label', 'Key') }}
									</label>

									<input class="mt-2 input" type="text" :id="`headers[${index}][key]`" autocomplete="off" x-model="header.key" required>
								</div>

								<div>
									<label :for="`headers[${index}][value]`">
										{{ p__('label', 'Value') }}
									</label>

									<input class="mt-2 input" type="text" :id="`headers[${index}][value]`" autocomplete="off" x-model="header.value" required>
								</div>

								<button type="button" @click="removeHeader(index)" class="absolute bottom-3 start-full ms-3 text-content-dimmed group hover:text-content" x-tooltip.raw="{{ __('Remove header') }}">
									<i class="text-2xl hidden ti ti-circle-x-filled group-hover:block"></i>
									<i class="text-2xl block ti ti-circle-x group-hover:hidden"></i>
								</button>
							</div>
						</div>
					</template>

					<div>
						<button type="button" class="w-full button button-dimmed" @click="addHeader">
							<i class="ti ti-circle-plus"></i>
							{{ p__('button', 'Add header') }}
						</button>
					</div>
				</section>

				<template x-for="(model, index) in llm.models">
					<section class="flex flex-col gap-6 box" data-density="comfortable">
						<template x-if="index == 0">
							<h2>{{ p__('heading', 'Models') }}</h2>
						</template>

						<div class="grid relative grid-cols-2 gap-6" x-data>
							<div>
								<label :for="`models[${index}][key]`">
									{{ p__('label', 'Key') }}
								</label>

								<input class="mt-2 input" type="text" placeholder="groq/llama2:latest" :id="`models[${index}][key]`" autocomplete="off" x-model="model.key" @input="$event.target.value = $event.target.value.startsWith(`${llmKey}/`) ? $event.target.value : `${llmKey}/` + $event.target.value.replace(llmKey, ''); setModelName($event.target.value, model)" required>

								<ul class="info mt-2">
									<li>
										{{ __('The key is used to identify the model. It must be unique.') }}
									</li>
								</ul>
							</div>

							<div class="col-start-1">
								<label :for="`models[${index}][name]`">
									{{ p__('label', 'Name') }}
								</label>

								<input class="mt-2 input" type="text" :id="`models[${index}][name]`" autocomplete="off" placeholder="Llama 3.2" x-model="model.name">

								<ul class="info mt-2">
									<li>
										{{ __('The name will be shown to end users. If left empty, it will be generated from the key.') }}
									</li>
								</ul>
							</div>

							<div>
								<label :for="`models[${index}][provider]`">
									{{ p__('label', 'Provider') }}
								</label>

								<input class="mt-2 input" type="text" :id="`models[${index}][provider]`" autocomplete="off" placeholder="Meta" x-model="model.provider.name">

								<ul class="info mt-2">
									<li>
										{{ __('The provider is the name of the model provider. Example: Meta, OpenAI, etc.') }}
									</li>
								</ul>
							</div>
						</div>

						<hr class="my-4 md:my-6">

						<div class="grid grid-cols-2 gap-6">
							<label class="flex gap-4 items-center cursor-pointer box hover:border-line">
								<div>
									<div class="text-sm">
										{{ __('Vision') }}
									</div>

									<div class="font-normal text-content-dimmed">
										{{ __('Enable only if the model supports vision') }}
									</div>
								</div>

								<div class="ms-auto">
									<input type="checkbox" class="hidden peer" :checked="model.config.vision" @change="model.config.vision = $el.checked">

									<span class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ms-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
								</div>
							</label>

							<label class="flex gap-4 items-center cursor-pointer box hover:border-line">
								<div>
									<div class="text-sm">
										{{ __('Tools') }}
									</div>

									<div class="font-normal text-content-dimmed">
										{{ __('Enable only if the model supports tool calls') }}
									</div>
								</div>

								<div class="ms-auto">
									<input type="checkbox" class="hidden peer" :checked="model.config.tools" @change="model.config.tools = $el.checked">

									<span class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ms-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
								</div>
							</label>
						</div>

						<div>
							<button type="button" @click="removeModel(index)" class="button button-sm button-outline">
								<i class="ti ti-circle-x-filled"></i>
								{{ __('Remove model') }}
							</button>
						</div>
					</section>
				</template>

				<div>
					<button type="button" class="w-full button button-dimmed" @click="addModel">
						<i class="ti ti-circle-plus"></i>
						{{ p__('button', 'Add model') }}
					</button>
				</div>
			</div>
			<div class="flex gap-4 justify-end">
				<a href="admin/settings" class="button button-outline">
					{{ p__('button', 'Cancel') }}
				</a>

				<button class="button button-accent" type="submit" :processing="isProcessing">
					{% include "/snippets/spinner.twig" %}

					{{ p__('button', 'Save changes') }}
				</button>
			</div>
		</form>
	</x-form>
{% endblock %}