{% extends "/layouts/main.twig" %}
{% set mobile_head_button = { link: 'app/video' } %}

{% set active_menu = '/app/video' %}
{% set xdata %}video(
	`{{ option.features.video.default_model|default(null) }}`,
{{ services|json_encode }},
{{ (video ?? null )|json_encode() }}
){% endset %}
{% block title p__('title', 'Video')|title %}

{% block sidebar %}
	<div class="hidden group-data-[key=history]/sidebar:block">
		<div class="flex items-center justify-between p-4 border-b border-line sticky top-0 bg-main z-10">
			<h2>{{ p__('heading', 'History') }}</h2>

			<button type="button" class="text-content-dimmed hover:text-content" @click="sidebar.close()" x-tooltip.raw.placement.left="{{ __('Close') }}">
				<i class="text-2xl ti ti-x"></i>
			</button>
		</div>

		<div>
			<template x-for="i in history" :key="i.id">
				<a :href="`app/video/${i.id}`" class="flex gap-2 items-center p-4 border-b border-line-dimmed hover:bg-line-dimmed/50" :class="preview?.id == i.id ? 'bg-line-dimmed/50' : ''" @click.prevent="select(i)">
					<x-avatar :title="i.title" :src="i.cover_image?.url" :hash="i.cover_image?.blur_hash" icon="slideshow" class="shrink-0"></x-avatar>

					<div class="overflow-hidden">
						<div x-text="i.title || `{{ __('Untitled resource') }}`" class="overflow-hidden text-sm text-ellipsis text-nowrap max-w-full" :class="i.title ? '' : 'text-content-dimmed'"></div>

						<div class="flex">
							<x-time :datetime="i.created_at" data-type="date" class="text-xs text-content-dimmed"></x-time>
						</div>
					</div>
				</a>
			</template>

			<template x-if="!historyLoaded">
				<div class="my-8 flex justify-center">
					<button type="button" @click="fetchHistory()" class="font-semibold hover:underline text-sm">
						{{ __('Load more') }}
					</button>
				</div>
			</template>

			<template x-if="historyLoaded && history.length === 0">
				<div class="p-4 text-content-dimmed">
					{{ __('No videos yet') }}
				</div>
			</template>
		</div>
	</div>
{% endblock %}

{% block toolbar %}
	<div class="absolute z-10 top-4 end-10 hidden md:flex gap-2 transition-all ease-in">
		<a href="app/video" class="text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('New video') }}">
			<i class="text-2xl ti ti-square-rounded-plus"></i>
		</a>

		<a href="app/library/video" class="text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('History') }}" @click.prevent="sidebar.open('history')">
			<i class="text-2xl ti ti-file-stack"></i>
		</a>
	</div>
{% endblock %}

{% block template %}
	<div class="flex flex-col gap-4 grow">
		<div :class="preview && [3, 4].includes(preview.state) ? '' : 'flex justify-center my-auto'">
			<template x-if="!preview && !isProcessing">
				<div class="my-10 text-center md:my-0">
					<div class="mx-auto w-16 h-16 bg-linear-to-br from-[#FF188F] to-[#F38383] tool-icon">
						<div class="bg-linear-to-br from-[#FF188F] to-[#F38383]"></div>

						{% include "snippets/icons/video.twig" %}
					</div>

					<h1 class="mt-6">{{ p__('heading', 'Video') }}</h1>
					<p class="mt-1 text-lg font-light text-content-dimmed">
						{{ __('Use your imagination to create awesome videos.') }}</p>
				</div>
			</template>

			<template x-if="isProcessing">
				<div class="my-10 text-center md:my-0">
					<div class="flex justify-center text-content-dimmed">
						{% include "snippets/spinner.twig" with {size: '4rem'} %}
					</div>

					<h1 class="mt-6">{{ p__('heading', 'Preparing...') }}</h1>
					<p class="mt-1 text-lg font-light text-content-dimmed">
						{{ __('Please wait while your request is processed.') }}</p>
				</div>
			</template>

			<template x-if="preview && !isProcessing && preview.state < 3">
				<div class="my-10 text-center md:my-0 flex flex-col gap-6">
					<div class="flex justify-center text-content-dimmed">
						{% include "snippets/spinner.twig" with {size: '4rem'} %}
					</div>

					<div class="flex flex-col gap-1">
						<h1>{{ p__('heading', 'Generating video...') }}</h1>

						<template x-if="!preview.progress">
							<p class="text-lg font-light text-content-dimmed">
								{{ __('This may take a while. You can leave this page.') }}</p>
						</template>

						<template x-if="preview.progress">
							{% set progress %}
							<span x-text="`${preview.progress}%`"></span>
							{% endset %}

							<p class="text-lg font-light text-content-dimmed">
								{{ __('Your video is on its way (:progress complete).', {':progress': progress})|raw }}
							</p>
						</template>

						<template x-if="preview.progress">
							<div class="mt-4 flex justify-center">
								<div class="w-full max-w-2xs h-2 bg-line-dimmed rounded-sm">
									<div :style="`width: ${preview.progress}%`" class="h-full bg-content rounded-sm transition-all"></div>
								</div>
							</div>
						</template>
					</div>

					<hr class="border-none h-px bg-line-dimmed bg-linear-to-r from-main via-line-dimmed to-main">

					<div class="flex flex-col items-center gap-2 group">
						<span class="text-xs font-medium text-content-super-dimmed">{{ __('What would you like to do?') }}</span>

						<div class="flex items-center gap-2 text-xl px-2 py-1.5 rounded-lg border border-line-dimmed group-hover:border-line">
							<button type="button" class="flex items-center font-bold text-content-dimmed hover:text-content transition-all" x-tooltip.raw.html="{{ __('Generate a new video from scratch') }}" @click="actionNew">
								<i class="ti ti-square-rounded-plus"></i>
								<span class="block text-xs max-w-0 overflow-hidden transition-all group-hover:ms-1 group-hover:max-w-md group-hover:opacity-100 opacity-0 whitespace-nowrap">{{ __('New') }}</span>
							</button>

							<button type="button" class="flex items-center font-bold text-content-dimmed hover:text-content transition-all" x-tooltip.raw.html="{{ __('Revise parameters and generate a new video') }}" @click="actionEdit">
								<i class="ti ti-versions"></i>
								<span class="block text-xs max-w-0 overflow-hidden transition-all group-hover:ms-1 group-hover:max-w-md group-hover:opacity-100 opacity-0 whitespace-nowrap">{{ __('Edit') }}</span>
							</button>
						</div>
					</div>
				</div>
			</template>

			<template x-if="preview && !isProcessing && [3, 4].includes(preview.state)">
				<div class="flex flex-col gap-10">
					<div class="flex flex-col gap-4">
						<div>
							<div class="text-xl autogrow-textarea font-editor-heading" :data-replicated-value="preview.title">
								<textarea placeholder="{{ __('Untitled resource') }}" autocomplete="off" x-model="preview.title" rows="1" @input.debounce.750ms="save(preview)" class="block px-0 py-0 w-full bg-transparent border-0 ring-0 transition-colors appearance-none outline-none resize-none placeholder:text-content-dimmed placeholder:opacity-50 read-only:text-content-dimmed"></textarea>
							</div>

							<div class="mt-1">
								<x-uuid x-text="preview.id"></x-uuid>
							</div>
						</div>

						<div class="flex gap-4 items-center">
							{% include "snippets/audience.twig" with {ref: 'preview'} %}

							<span class="hidden gap-1 items-center text-sm whitespace-nowrap text-content-dimmed md:flex">
								<i class="text-base ti ti-cpu-2"></i>
								<span x-text="preview.model" class="uppercase"></span>
							</span>

							<span class="flex gap-1 items-center text-sm whitespace-nowrap text-content-dimmed me-auto">
								<i class="text-base ti ti-coins"></i>
								<x-credit :data-value="preview.cost" format="{{ __(":count credits") }}"></x-credit>
							</span>

							<template x-if="preview.output_file">
								<a :href="preview.output_file.url" type="button" download="video.mp4" target="_blank" class="transition-all text-content-dimmed hover:text-content">
									<i class="text-xl ti ti-download"></i>
								</a>
							</template>

							<button type="button" @click="modal.open('delete-modal');" class="transition-all text-content-dimmed hover:text-failure">
								<i class="text-xl ti ti-trash"></i>
							</button>
						</div>
					</div>

					<div class="flex flex-col gap-4">
						<template x-if="preview.state === 4">
							<div class="flex flex-col gap-4 rounded-lg bg-line-super-dimmed text-center box items-center" data-density="comfortable">
								<div class="flex flex-col gap-1">
									<h1>{{ p__('heading', 'Video generation failed') }}</h1>
									<p class="text-lg font-light text-content-dimmed">
										{{ __('Failed to generate video.') }}
									</p>
								</div>

								<template x-if="preview.meta.failure_reason">
									<p class="text-sm text-failure font-medium">
										<span x-text="preview.meta.failure_reason"></span>
									</p>
								</template>
							</div>
						</template>

						<template x-if="preview.output_file">
							<div class="p-1 rounded-3xl border group border-line">
								<video controls autoplay class="w-full rounded-[1.25rem]" :src="preview.output_file.url" :poster="preview.cover_image?.url" :width="preview.cover_image?.width" :height="preview.cover_image?.height"></video>
							</div>
						</template>

						<template x-if="preview.params.prompt">
							<div class="text-xs text-center">
								<x-copy class="text-content-dimmed hover:text-content" data-msg="{{ __('Prompt copied to clipboard') }}" x-text="preview.params.prompt" :data-copy="preview.params.prompt"></x-copy>
							</div>
						</template>

						<template x-if="preview.params.prompt">
							<hr class="border-none h-px bg-line-dimmed bg-linear-to-r from-main via-line-dimmed to-main">
						</template>

						<div class="flex flex-col items-center gap-2 group">
							<span class="text-xs font-medium text-content-super-dimmed">{{ __('What would you like to do?') }}</span>

							<div class="flex items-center gap-2 text-xl px-2 py-1.5 rounded-lg border border-line-dimmed group-hover:border-line">
								<button type="button" class="flex items-center font-bold text-content-dimmed hover:text-content transition-all" x-tooltip.raw.html="{{ __('Generate a new video from scratch') }}" @click="actionNew">
									<i class="ti ti-square-rounded-plus"></i>
									<span class="block text-xs max-w-0 overflow-hidden transition-all group-hover:ms-1 group-hover:max-w-md group-hover:opacity-100 opacity-0 whitespace-nowrap">{{ __('New') }}</span>
								</button>

								<button type="button" class="flex items-center font-bold text-content-dimmed hover:text-content transition-all" x-tooltip.raw.html="{{ __('Revise parameters and generate a new video') }}" @click="actionEdit">
									<i class="ti ti-versions"></i>
									<span class="block text-xs max-w-0 overflow-hidden transition-all group-hover:ms-1 group-hover:max-w-md group-hover:opacity-100 opacity-0 whitespace-nowrap">{{ __('Edit') }}</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</template>
		</div>
	</div>

	<modal-element name="models">
		<form @submit.prevent="modal.close()" class="flex flex-col gap-6 modal">
			<div class="flex justify-between items-center">
				<h2 class="text-xl">{{ p__('heading', 'Models') }}</h2>

				<button class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line" @click="modal.close()" type="button">
					<i class="text-xl ti ti-x"></i>
				</button>
			</div>

			<div class="flex flex-col gap-2">
				<input type="text" class="mt-2 input" placeholder="{{ __('Search models') }}" x-model="query">

				<div class="scroll-area">
					<div class="grid grid-cols-2 gap-1">
						<template x-for="m in adapters" :key="m.key + '-' + m.model.key">
							<template x-if="search(query, m, 'adapter')">
								<div class="relative flex group" :class="m.model.granted ? null : 'opacity-50 hover:opacity-100'">
									<button type="button" @click="chooseAdapter(m)" class="box w-full flex flex-col text-start gap-4">
										<div class="flex items-center gap-2">
											<x-avatar :mask="m.model.icon || m.model.provider?.icon || m.icon" :icon="!m.model.icon && !m.model.provider?.icon && !m.icon ? 'cpu' : null" class="contain avatar-outline"></x-avatar>

											<div class="flex flex-col">
												<h3 class="text-sm line-clamp-1" x-text="m.model.name" :title="m.model.name"></h3>
												<div class="text-xs text-content-dimmed line-clamp-1" x-text="m.model.provider?.name || m.name"></div>
											</div>
										</div>

										<template x-if="m.model.description">
											<p x-text="m.model.description" class="text-xs text-content-dimmed line-clamp-3"></p>
										</template>

										<div class="flex items-center gap-1 mt-auto">
											<template x-if="m.model.attributes?.preview">
												<i class="ti ti-test-pipe text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('Experimental') }}"></i>
											</template>

											<template x-if="m.model.attributes?.turbo">
												<i class="ti ti-progress-bolt text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('Optimized for speed') }}"></i>
											</template>
										</div>

										<template x-if="!m.model.granted">
											<span class="flex items-center w-full gap-1">
												<i class="ti ti-diamond"></i>
												<span class="text-xs">{{ __('Upgrade plan') }}</span>
											</span>
										</template>
									</button>

									<template x-if="m.model.granted && !m.pinned">
										<button type="button" class="ti ti-pin text-base opacity-0 group-hover:opacity-100 text-content-dimmed hover:text-content absolute top-7 right-4" x-tooltip.raw="{{ __('Pin') }}" @click="togglePin(m, 'model')"></button>
									</template>

									<template x-if="m.model.granted && m.pinned">
										<button type="button" class="ti ti-pinned-filled text-base text-content-dimmed hover:text-content absolute top-7 right-4" x-tooltip.raw="{{ __('Unpin') }}" @click="togglePin(m, 'model')"></button>
									</template>

									<template x-if="!m.model.granted">
										<a href="app/billing" class="full"></a>
									</template>

									<a :href="`app/models/?model=${m.model.key}`" target="_blank" class="ti ti-arrow-up-right absolute bottom-4 text-content-dimmed hover:text-content right-4 transition-all invisible group-hover:visible translate-y-2 -translate-x-2 group-hover:translate-y-0 group-hover:translate-x-0 group-hover:delay-1000" x-tooltip.raw="{{ __('View model details') }}"></a>
								</div>
							</template>
						</template>
					</div>
				</div>
			</div>

			<div>
				<button type="submit" class="w-full button">
					{{ p__('button', 'Confirm') }}
				</button>
			</div>
		</form>
	</modal-element>

	<modal-element name="options">
		<template x-if="adapter">
			<form @submit.prevent="modal.close()" class="flex flex-col gap-6 modal">
				<div class="flex justify-between items-center">
					<div class="flex items-center gap-2">
						<h2 class="text-xl">{{ p__('heading', 'Options') }}</h2>

						<template x-if="JSON.stringify(original) != JSON.stringify(params)">
							<button type="button" class="button button-xs button-dimmed" @click="reset">
								{{ p__('button', 'Reset') }}
							</button>
						</template>
					</div>

					<button class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line" @click="modal.close()" type="button">
						<i class="text-xl ti ti-x"></i>
					</button>
				</div>

				<button type="button" class="box w-full flex items-center gap-2 text-start" @click="modal.open('models')">
					<x-avatar :mask="adapter.model.icon || adapter.model.provider?.icon || adapter.icon" :icon="!adapter.model.icon && !adapter.model.provider?.icon && !adapter.icon ? 'cpu' : null" class="contain avatar-outline"></x-avatar>

					<div>
						<div class="font-bold" x-text="adapter.model.name"></div>
						<div class="text-xs text-content-dimmed" x-text="adapter.model.provider?.name || adapter.model.name"></div>
					</div>

					<i class="ti ti-caret-up-down-filled text-base ms-auto"></i>
				</button>

				<template x-for="f in adapter.model.config.params">
					<div class="flex flex-col gap-2" x-data>
						<template x-if="f.key === 'resolution'">
							<label>
								<i class="text-xl ti ti-maximize"></i>
								<span>{{ p__('label', 'Resolution') }}</span>
							</label>
						</template>

						<template x-if="f.key === 'aspect_ratio'">
							<label>
								<i class="text-xl ti ti-crop-portrait"></i>
								<span>{{ p__('label', 'Aspect ratio') }}</span>
							</label>
						</template>

						<template x-if="f.key === 'duration'">
							<label>
								<i class="text-xl ti ti-clock"></i>
								<span>{{ p__('label', 'Duration') }}</span>
							</label>
						</template>

						<template x-if="f.key === 'loop'">
							<label>
								<i class="text-xl ti ti-infinity"></i>
								<span>{{ p__('label', 'Loop') }}</span>
							</label>
						</template>

						<template x-if="!['aspect_ratio', 'duration', 'resolution', 'loop'].includes(f.key)">
							<label x-text="f.label"></label>
						</template>

						<div class="flex items-center flex-wrap gap-1">
							<template x-for="option in f.options">
								<button type="button" class="text-base flex items-center gap-2 px-3 py-1 rounded-lg" @click="params[f.key]==option.value ? delete params[f.key] : params[f.key]=option.value;" :class="params[f.key] !== undefined && params[f.key] == option.value ? 'bg-button text-button-content' : 'bg-transparent hover:bg-intermediate border border-line'">
									<span x-text="option.label"></span>
								</button>
							</template>
						</div>
					</div>
				</template>

				<template x-if="adapter.model.config.negative_prompt">
					<div>
						<label for="negative_prompt">
							{{ p__('label', 'Negative prompt') }}
						</label>

						<input type="text" id="negative_prompt" class="mt-2 input" autocomplete="off" placeholder="{{ __('Type negative prompt here') }}" x-model="negativePrompt"/>
					</div>
				</template>

				<template x-if="adapter.model.config.frames">
					<div class="flex flex-col gap-2">
						<label>
							<i class="text-xl ti ti-keyframes"></i>
							<span>
								{{ p__('label', 'Frames') }}

								<template x-if="adapter.model.config.frames?.required">
									<span>
										*
									</span>
								</template>
							</span>
						</label>

						<input type="file" @change="addFrame($event)" name="file" :accept="(adapter.model.config.frames.mime || []).join(',')" class="hidden" :multiple="adapter.model.config.frames.limit > 1" x-ref="file">

						<div class="flex flex-wrap gap-1">
							<template x-for="frame in frames">
								<div class="w-28 h-36 border border-line bg-line-dimmed rounded-lg relative overflow-hidden group">
									<img :src="URL.createObjectURL(frame)" class="w-full h-full object-cover rounded-lg transition-all group-hover:scale-105 duration-1000">

									<button type="button" class="hidden group-hover:flex absolute top-2 end-2 size-6 items-center justify-center rounded-full bg-button text-button-content" @click="removeFrame(frame)">
										<i class="ti ti-x"></i>
									</button>
								</div>
							</template>

							<template x-if="frames.length < adapter.model.config.frames.limit">
								<button type="button" class="w-28 h-36 flex flex-col justify-between text-start border-dashed items-start gap-2 border border-line hover:bg-intermediate hover:text-intermediate-content rounded-lg p-4" @click="$refs.file.click()">
									<i class="ti ti-plus"></i>

									<span class="text-sm font-medium uppercase">
										<template x-if="frames.length == 0 && [1,2].includes(adapter.model.config.frames.limit)">
											<span>
												{{ p__('label', 'Start frame') }}
											</span>
										</template>

										<template x-if="frames.length == 1 && adapter.model.config.frames.limit == 2">
											<span>
												{{ p__('label', 'End frame') }}
											</span>
										</template>

										<template x-if="adapter.model.config.frames.limit > 2">
											<span>
												{{ p__('label', 'Add frame') }}
											</span>
										</template>
									</span>
								</button>
							</template>
						</div>
					</div>
				</template>

				<div>
					<button type="submit" class="w-full button">
						{{ p__('button', 'Confirm') }}
					</button>
				</div>
			</form>
		</template>
	</modal-element>

	<modal-element name="delete-modal">
		<template x-if="preview">
			<form class="modal flex flex-col items-center gap-6" @submit.prevent="remove(preview);">
				<div class="flex relative justify-center items-center mx-auto w-24 h-24 rounded-full text-failure/25">
					<svg class="absolute top-0 left-0 w-full h-full" width="112" height="112" viewbox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="56" cy="56" r="55.5" stroke="currentColor" stroke-dasharray="8 8"/>
					</svg>

					<div class="flex justify-center items-center w-20 h-20 text-4xl rounded-full transition-all bg-failure/25 text-failure">
						<i class="text-4xl ti ti-trash"></i>
					</div>
				</div>

				<div class="flex flex-col gap-2 items-center text-center">
					<div class="text-lg text-center">
						{{ __('Do you really want to delete the video?') }}
					</div>

					<p class="text-sm text-content-dimmed">
						{{ __('All associated content and files will be permanently removed. This action cannot be reverted once confirmed.') }}
					</p>
				</div>

				<div class="flex gap-4 justify-center items-center">
					<button class="button button-outline" @click="modal.close()" type="button">
						{{ p__('button', 'No, cancel') }}
					</button>

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

						{{ p__('button', 'Yes, delete') }}
					</button>
				</div>
			</form>
		</template>
	</modal-element>
{% endblock %}

{% block footer %}
	<div class="sticky bottom-0 z-40 mt-auto">
		<div class="h-4 to-transparent bg-linear-to-t from-main"></div>

		<div class="bg-main">
			<template x-if="form">
				<form @submit.prevent="{{ workspace.subscription.plan.config.video.is_enabled|default(false) ? 'submit($el)' : '' }}">
					<div class="flex items-center gap-2 py-2 px-3 text-xs">
						<button type="button" class="button button-xs button-outline" @click="modal.open('models');">
							<x-avatar :mask="adapter.model.icon || adapter.model.provider?.icon || adapter.icon" :icon="!adapter.model.icon && !adapter.model.provider?.icon && !adapter.icon ? 'cpu' : null" class="contain avatar-sm bg-transparent -mx-1"></x-avatar>

							<span x-text="adapter.model.name"></span>
							<i class="ti ti-caret-up-down-filled text-xs"></i>
						</button>

						<template x-if="frames.length > 0 || Object.keys(params).filter(p => ['aspect_ratio', 'duration', 'resolution', 'loop'].includes(p)).length > 0">
							<button type="button" class="flex items-center gap-2 border-s border-line ps-4 ms-2 text-content-dimmed font-semibold" @click.stop="modal.open('options')">
								<template x-if="params.resolution && (f = adapter.model.config.params.find(p => p.key == 'resolution'))">
									<span class="flex items-center gap-1 hover:text-content" x-tooltip.raw="{{ p__('label', 'Resolution') }}">
										<i class="text-base ti ti-maximize"></i>
										<span x-text="f.options.find(o => o.value == params.resolution)?.label"></span>
									</span>
								</template>

								<template x-if="params.aspect_ratio && (f = adapter.model.config.params.find(p => p.key == 'aspect_ratio'))">
									<span class="flex items-center gap-1 hover:text-content" x-tooltip.raw="{{ p__('label', 'Aspect ratio') }}">
										<i class="text-base ti ti-crop-portrait"></i>
										<span x-text="f.options.find(o => o.value == params.aspect_ratio)?.label"></span>
									</span>
								</template>

								<template x-if="params.duration && (f = adapter.model.config.params.find(p => p.key == 'duration'))">
									<span class="flex items-center gap-1 hover:text-content" x-tooltip.raw="{{ p__('label', 'Duration') }}">
										<i class="text-base ti ti-clock"></i>
										<span x-text="f.options.find(o => o.value == params.duration)?.label"></span>
									</span>
								</template>

								<template x-if="params.loop && (f = adapter.model.config.params.find(p => p.key == 'loop'))">
									<span class="flex items-center gap-1 hover:text-content" x-tooltip.raw="{{ p__('label', 'Loop') }}">
										<i class="text-base ti ti-infinity"></i>
									</span>
								</template>

								<template x-if="frames.length > 0">
									<span class="flex items-center gap-1 hover:text-content" x-tooltip.raw="{{ __('Frames') }}">
										<i class="text-base ti ti-keyframes"></i>
										<span x-text="frames.length"></span>
									</span>
								</template>
							</button>
						</template>

						<template x-if="frames.length == 0 && Object.keys(params).filter(p => ['aspect_ratio', 'duration', 'resolution', 'loop'].includes(p)).length == 0">
							<button type="button" class="relative text-base hover:text-content" x-tooltip.raw="{{ p__('button', 'Show model related options') }}" @click.stop="modal.open('options')" :class="JSON.stringify(original) !== JSON.stringify(params) ? 'text-content' : 'text-content-dimmed'">
								<i class="ti ti-settings"></i>

								<template x-if="JSON.stringify(original) != JSON.stringify(params)">
									<i class="absolute bottom-3 start-2 ti ti-point-filled text-failure"></i>
								</template>
							</button>
						</template>

						<template x-if="adapter.model.estimation && adapter.model.estimation > 0">
							<span class="flex gap-1 items-center text-content-dimmed font-semibold ms-auto" x-tooltip.raw="{{ __('Minimum credits required to use this model') }}">
								<i class="ti ti-coins text-base"></i>
								<x-credit :data-value="adapter.model.estimation" format="{{ __(":count credits") }}"></x-credit>
							</span>
						</template>
					</div>

					<div class="relative p-0.5 rounded-3xl bg-line-dimmed has-[textarea:focus]:bg-linear-to-br has-[textarea:focus]:from-gradient-from has-[textarea:focus]:to-gradient-to">
						<div class="flex gap-2 items-end p-2 rounded-[1.375rem] bg-main" :class="{'ps-4': !adapter.model.config.frames }">
							<template x-if="adapter.model.config.frames">
								<button type="button" class="flex justify-center items-center w-10 h-10 text-content-dimmed hover:text-content" @click="frames.length == (adapter.model.config.frames.limit || 1) ? modal.open('options') : $refs.file.click()" x-tooltip.raw="{{ __('Add frames') }}">
									<i class="text-2xl ti ti-plus"></i>
								</button>
							</template>

							<div class="overflow-y-auto mb-2 max-h-36 autogrow-textarea text-content grow" :data-replicated-value="prompt">
								<textarea placeholder="{{ __('Type a prompt here...') }}" autocomplete="off" rows="1" x-model="prompt" x-ref="prompt" :maxlength="adapter.model.config.prompt_length" class="block p-0 text-base bg-transparent border-none focus:ring-0 placeholder:text-content-dimmed" @keydown.enter="{{ workspace.subscription.plan.config.video.is_enabled|default(false) ? 'enter' : '' }}" required></textarea>
							</div>

							<div class="flex gap-2 items-center ms-auto">
								{% if workspace.subscription.plan.config.video.is_enabled|default(false) %}
									<template x-if="adapter.model.granted">
										<button type="submit" class="p-0 w-10 h-10 button rounded-[0.875rem] button-accent" :disabled="!prompt || isProcessing || (adapter.model.config.frames?.required && frames.length == 0)" :processing="isProcessing">
											{% include "/snippets/spinner.twig" %}

											<template x-if="!isProcessing">
												<i class="ti ti-arrow-up"></i>
											</template>
										</button>
									</template>

									<template x-if="!adapter.model.granted">
										<a href="app/billing" class="p-0 w-10 h-10 button rounded-[0.875rem] button-dimmed" x-tooltip.raw="{{ __('Selected model is not available in your plan. Either upgrade your plan or select another model.') }}">
											<i class="ti ti-lock-up"></i>
										</a>
									</template>
								{% else %}
									<a href="app/billing" class="p-0 w-10 h-10 button rounded-[0.875rem] button-dimmed" x-tooltip.raw="{{ __('Upgrade your plan') }}">
										<i class="ti ti-lock-up"></i>
									</a>
								{% endif %}
							</div>
						</div>
					</div>
				</form>
			</template>

			{% include "/sections/footer.twig" %}
		</div>
	</div>
{% endblock %}