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

{% set active_menu = '/app/assistants' %}
{% set sort = [
  {
    value: null,
    label: p__('label', 'Default')
  },

  {
    value: 'name',
    label: p__('label', 'Name')
  }
] %}

{% set xdata %}
list("assistants",
{{ sort|json_encode|raw }},
25,
true,
"assistant")
{% endset %}

{% block title p__('title', 'Assistants')|title %}

{% block template %}
	{# Header #}
	<div>
		<a href="app" class="inline-flex gap-1 items-center text-sm rounded-lg text-content-dimmed hover:text-content">
			<i class="text-lg ti ti-square-rounded-arrow-left-filled rtl:rotate-180"></i>

			{{ p__('button', 'Dashboard') }}
		</a>

		<div class="flex gap-4 justify-between items-center mt-4">
			<div>
				<div class="flex gap-2 items-center">
					<h1>{{ p__('heading', 'Assistants') }}</h1>

					<template x-if="total !== null">
						<div class="text-sm text-content-dimmed md:hidden">
							(<span x-text="total"></span>)
						</div>
					</template>
				</div>

				<p class="text-content-dimmed">
					{{ __('Choose one of the AI assistants to chat with') }}
				</p>
			</div>

			<div class="md:hidden">
				<button type="button" class="hidden w-8 h-8 avatar">
					<i class="text-lg ti ti-adjustments-horizontal"></i>
				</button>
			</div>
		</div>
	</div>

	{# Filters #}
	{% include "/snippets/filters.twig" with { 
  total: __("Total :count assistants"),
  showHidden: true,
} %}

	{# List #}
	<div class="group/list" data-state="initial" :data-state="state">
		<template x-if="typeof isFiltered !== 'undefined' && isFiltered">
			<div class="hidden group-data-[state=empty]/list:block">
				{% include "sections/empty.twig" with { title: p__('heading', 'Empty result set'), message: __('There are no assistants yet.'), reset: __('There are no assistant matching your search.') } %}
			</div>
		</template>

		<template x-if="resources.length > 0 || typeof isFiltered === 'undefined' || !isFiltered">
			<div class="grid grid-cols-2 gap-1 md:grid-cols-3">
				{% for i in range(1,6) %}
					<div class="hidden group-data-[state=initial]/list:block">
						{% include "/snippets/cards/assistant.twig" with {placeholder:true} only %}
					</div>
				{% endfor %}

				{% if option.features.chat.is_visible is not defined or option.features.chat.is_visible %}
					<a href="app/chat" class="flex flex-col gap-4 box box-selected group-data-[state=initial]/list:hidden relative justify-center">
						<div class="flex flex-col items-center gap-2">
							<x-avatar class="avatar-lg" icon="sparkles" :src="`{{ option.features.chat.avatar is defined and option.features.chat.avatar ? option.features.chat.avatar : null }}`"></x-avatar>

							<div class="flex flex-col items-center">
								<h3 class="line-clamp-1">
									{{ option.features.chat.name ?? 'AI' }}
								</h3>

								<div class="text-sm text-content-dimmed line-clamp-1">
									{{ __('Universal AI bot') }}
								</div>
							</div>
						</div>
					</a>
				{% endif %}

				<template x-for="assistant in resources" :key="assistant.id">
					{% include "/snippets/cards/assistant.twig" only %}
				</template>
			</div>
		</template>
	</div>
{% endblock %}