<div>
	<div id="quick-access" class="relative group" data-collapsed x-init="$el.removeAttribute('data-collapsed')" x-data="quickAccess">
		<div class="flex flex-col gap-6">
			<div class="flex flex-col items-center">
				<div class="text-content-dimmed transition-all flex items-center gap-2 duration-1000 delay-250 group-[[data-collapsed]]:opacity-0 group-[[data-collapsed]]:invisible group-[[data-collapsed]]:translate-y-3">
					<span>👋</span>
					{{ p__('greeting', 'Hello, %s!', user.first_name) }}
				</div>

				<h1 class="text-2xl font-bold transition-all duration-500 group-[[data-collapsed]]:opacity-0 group-[[data-collapsed]]:invisible group-[[data-collapsed]]:translate-y-1">
					{{ p__('greeting', 'How can I assist you?') }}
				</h1>
			</div>

			<div class="flex flex-col gap-4">
				<form action="app/chat" method="GET" class="relative" x-ref="form">
					<div class="relative p-0.5 rounded-3xl bg-line-dimmed focus-within:bg-gradient-from focus-within:bg-linear-to-br focus-within:from-gradient-from focus-within:to-gradient-to">
						<div class="flex gap-2 items-end p-2 rounded-[1.375rem] bg-main pl-4 group">
							<div class="overflow-y-auto pt-2 mb-2 max-h-36 autogrow-textarea text-content grow" :data-replicated-value="prompt">
								<textarea placeholder="{{ __('Ask anything...') }}" name="q" autocomplete="off" rows="1" required x-model="prompt" x-ref="input" class="block p-0 text-base bg-transparent border-none focus:ring-0 placeholder:text-content-dimmed" @keydown.enter="enter"></textarea>
							</div>

							{% set kybdcls = 'h-10 block text-content-dimmed items-center justify-center gap-1 px-4 text-sm transition-all rounded-lg pointer-events-none font-primary ms-auto' %}

							<template x-if="prompt.length == 0">
								<kbd class="{{ kybdcls }} font-medium group-focus-within:hidden hidden md:flex" dir="ltr">
									<span class="-mr-0.5">⌘</span>K
								</kbd>
							</template>

							<template x-if="prompt.length == 0">
								<kbd class="{{ kybdcls }} font-medium hidden md:group-focus-within:flex">
									{{ p__('keyboard', 'ESC') }}
								</kbd>
							</template>

							<template x-if="prompt.length > 0">
								<button type="submit" class="button button-accent rounded-[0.875rem] p-0 w-10 h-10" :disabled="processing" :processing="processing">
									{% include "/snippets/spinner.twig" %}

									<template x-if="!processing">
										<i class="ti ti-arrow-right"></i>
									</template>
								</button>
							</template>
						</div>
					</div>
				</form>

				{% set links = [] %}

				{% if option.features.transcriber.is_enabled|default(false) %}
					{% set links = links|merge([
						{
							'url': '/app/transcriber',
							'label': __('Transcribe audio'),
							'icon': 'transcriber.twig',
						}
					]) %}
				{% endif %}

				{% if option.features.voice_isolator.is_enabled|default(false) %}
					{% set links = links|merge([
						{
							'url': '/app/voice-isolator',
							'label': __('Isolate sounds'),
							'icon': 'voice-isolator.twig',
						}
					]) %}
				{% endif %}

				{% if option.features.video.is_enabled|default(false) %}
					{% set links = links|merge([
						{
							'url': '/app/video',
							'label': __('Create videos'),
							'icon': 'video.twig',
						}
					]) %}
				{% endif %}

				{% if option.features.imagine.is_enabled|default(false) %}
					{% set links = links|merge([
						{
							'url': '/app/imagine',
							'label': __('Create images'),
							'icon': 'imagine.twig',
						}
					]) %}
				{% endif %}

				{% if links|length > 0 %}
					<div class="links hidden md:flex items-center justify-center gap-2">
						{% for link in links %}
							<a href="{{ link.url }}" class="button button-sm button-outline rounded-full">
								{% include "snippets/icons/" ~ link.icon %}

								{{ link.label }}
							</a>
						{% endfor %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>

	<div class="scroll pt-1" x-ref="explore">
		<button type="button" class="text-xs text-content-dimmed hover:text-content inline-flex items-center gap-1" @click="$refs.explore.scrollIntoView({ behavior: 'smooth' });">
			<i class="ti ti-arrow-down"></i>

			{{ p__('button', 'Scroll to explore') }}
		</button>
	</div>
</div>
