{% extends "/layouts/main.twig" %}

{% set active_menu = '/admin/templates' %}

{% set xdata %}
preset({{ (preset is defined ? preset : {})|json_encode }})
{% endset %}

{% block title (preset is defined ? p__('title', 'Edit template') : p__('title', 'New template'))|title %}

{% block template %}
	<x-form>
		<form class="flex flex-col gap-8" @submit.prevent="submit">
			<div>
				{% include "snippets/back.twig" with {link: 'admin/presets', label: 'Templates'} %}

				<h1 class="mt-4">
					<span x-show="!preset.id">
						{{ p__('heading', 'Create new template') }}
					</span>

					<span x-show="preset.id">
						{{ p__('heading', 'Edit template') }}:
						<span class="font-normal text-intermediate-content" x-text="preset.title"></span>
					</span>
				</h1>

				<template x-if="preset.id">
					<div class="mt-2">
						<x-uuid x-text="preset.id"></x-uuid>
					</div>
				</template>
			</div>

			<div class="flex flex-col gap-2">
				<section class="grid gap-6 md:grid-cols-2 box" data-density="comfortable">
					<h2 class="md:col-span-2">{{ p__('heading', 'Details') }}</h2>

					<div class="md:col-span-2">
						<label for="title">{{ p__('label', 'Title') }}</label>

						<input type="text" id="title" name="title" class="mt-2 input" autocomplete="off" required :placeholder="preset.title || `{{ __('Include a title for the template')|e('html_attr') }}`" x-model="model.title"/>
					</div>

					<div class="md:col-span-2">
						<label for="description">{{ p__('label', 'Description') }}</label>

						<textarea name="description" id="description" rows="5" class="mt-2 input" :placeholder="preset.description || `{{ __('Include a description for the template')|e('html_attr') }}`" x-model="model.description"></textarea>
					</div>

					<div>
						<label for="category">{{ p__('label', 'Category') }}</label>

						<select name="category" id="category" class="mt-2 input" x-model="model.category_id" :disabled="!categoriesFethed">
							<option value="">{{ p__('input-value', 'Uncategorized') }}</option>

							<template x-for="category in categories" :key="category.id">
								<option :value="category.id" x-text="category.title" :selected="category.id == model.category_id"></option>
							</template>
						</select>
					</div>

					<div>
						<label for="color">{{ p__('label', 'Color') }}</label>

						<div class="relative mt-2">
							<div class="flex overflow-hidden absolute start-3 top-1/2 justify-center items-center w-6 h-6 rounded-full -translate-y-1/2">

								<span class="absolute top-0 start-0 w-full h-full rounded-full opacity-10 bg-intermediate" :style="{backgroundColor: model.color}"></span>

								<div class="overflow-hidden relative w-3 h-3 rounded-full">
									<input type="color" class="w-[300%] h-[300%] absolute -top-full -start-full rounded-full border-none cursor-pointer appearance-none" x-model="model.color">
								</div>
							</div>

							<input type="text" id="color" name="color" class="ps-12 mt-2 input" autocomplete="off" :placeholder="preset.color || `{{ __('Include hex color code')|e('html_attr') }}`" maxlength="7" @input.debounce.500="sanitizeColor($event.target.value, $el)" x-init="$watch('model.color', value => $el.value = value)" :value="preset.color || '#000000'"/>
						</div>
					</div>

					<div class="md:col-span-2">
						<label for="icon">{{ p__('label', 'Icon') }}</label>

						<input type="text" id="icon" name="icon" class="mt-2 input" autocomplete="off" :placeholder="preset.image || ''" x-model="model.image"/>

						<p class="flex gap-1 items-center mt-2 text-sm text-intermediate-content">
							<i class="text-lg ti ti-info-square-rounded"></i>

							{% set link %}
							<a href="https://tabler-icons.io/" target="_blank" class="font-semibold text-content">Tabler Icons</a>
							{% endset %}

							{{ __('Include SVG source code or name of the any icon from %s', link)|raw }}
						</p>
					</div>

					<div class="flex justify-between items-center p-3 rounded-lg md:col-span-2 bg-intermediate">
						{{ p__('label', 'Status') }}

						<label class="inline-flex gap-2 items-center cursor-pointer">
							<input type="checkbox" name="status" class="hidden peer" :checked="model.status == 1" x-model="model.status">

							<span class="text-content-dimmed peer-checked:hidden">
								{{ p__('input-value', 'Inactive') }}
							</span>

							<span class="hidden text-success peer-checked:inline">
								{{ p__('input-value', 'Active') }}
							</span>

							<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>
						</label>
					</div>
				</section>

				<template x-if="!preset.is_locked">
					<section class="grid gap-6 box" data-density="comfortable">
						<div class="flex gap-2 items-center">
							<h2>{{ p__('heading', 'Prompt') }}</h2>

							<a href="https://docs.aikeedo.com/advanced/prompt-templates" class="badge" target="_blank">
								{{ p__('button', 'Docs') }}

								<i class="text-base ti ti-external-link"></i>
							</a>
						</div>

						<div>
							<label for="template">
								{{ p__('label', 'Prompt template') }}
							</label>

							<textarea name="template" id="template" rows="5" class="mt-2 input" :placeholder="preset.template" x-model="model.template"></textarea>
						</div>
					</section>
				</template>

			</div>

			<div class="flex gap-4 justify-end">
				<a href="admin/templates" class="button button-outline">
					{{ p__('button', 'Cancel') }}
				</a>

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

					<span x-show="!preset.id">
						{{ p__('button', 'Create template') }}
					</span>

					<span x-show="preset.id">
						{{ p__('button', 'Update template') }}
					</span>
				</button>
			</div>
		</form>
	</x-form>
{% endblock %}