{% if placeholder is defined %}
	<div class="flex flex-col items-center gap-4 box min-h-40">
		<div class="flex flex-col items-center gap-2">
			<div class="avatar avatar-lg loading"></div>

			<div class="flex flex-col items-center w-full">
				<div class="h-5 my-0.5 loading w-20"></div>
				<div class="h-4 my-0.5 loading w-32"></div>
			</div>
		</div>

		<div class="flex flex-col items-center w-full">
			<div class="my-0.5 w-full h-4 loading"></div>
			<div class="my-0.5 w-2/3 h-4 loading"></div>
		</div>
	</div>
{% else %}
	<div class="group relative flex" x-data>
		<a :href="assistant.granted ? `app/chat/${assistant.id}` : `app/billing`" class="flex relative flex-col gap-4 min-h-40 items-center text-center box w-full justify-center" :class="!assistant.granted ? 'opacity-50 group-hover:opacity-100' : ''">
			<div class="flex flex-col items-center gap-2">
				<x-avatar icon="box" :src="assistant.avatar" :title="assistant.name" class="avatar-lg"></x-avatar>

				<div class="flex flex-col items-center gap-1">
					<div class="flex flex-col items-center">
						<h3 class="line-clamp-1" x-text="assistant.name" :title="assistant.name"></h3>
						<template x-if="assistant.expertise">
							<div class="text-sm text-content-dimmed line-clamp-1" x-text="assistant.expertise"></div>
						</template>
					</div>

					<template x-if="assistant.user && assistant.user.id == $store.user.id">
						<div class="text-xs text-content-dimmed">{{ __('By you') }}</div>
					</template>

					<template x-if="assistant.user && assistant.user.id !== $store.user.id">
						<div class="text-xs text-content-dimmed">
							{% set by %}
							<span x-text="`${assistant.user.first_name} ${assistant.user.last_name}`"></span>
							{% endset %}

							{{ __('By :owner')|replace({':owner': by})|raw }}
						</div>
					</template>
				</div>
			</div>

			<template x-if="assistant.description">
				<p class="text-sm text-content-dimmed line-clamp-3" x-text="assistant.description"></p>
			</template>

			<template x-if="$store.workspace.subscription?.plan.config.assistants != null && !$store.workspace.subscription?.plan.config.assistants.includes(assistant.id)">
				<span class="flex items-center justify-center w-full gap-1">
					<i class="ti ti-diamond"></i>
					<span class="text-xs">{{ __('Upgrade plan') }}</span>
				</span>
			</template>
		</a>

		<template x-if="assistant.granted && !assistant.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 left-7" x-tooltip.raw="{{ __('Pin') }}" @click.stop="togglePin(assistant)"></button>
		</template>

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

		<template x-if="assistant.user && (assistant.user.id == $store.user.id || ($store.user.id == $store.workspace.owner.id && $store.workspace.users.some(u => u.id == assistant.user.id)))">
			<div class="absolute top-7 right-7 opacity-0 group-hover:opacity-100" @click.outside="$refs.context.removeAttribute('data-open')">

				<button class="relative z-10" @click="$refs.context.toggleAttribute('data-open')">
					<i class="text-2xl ti ti-dots-vertical text-content-dimmed hover:text-intermediate-content"></i>
				</button>

				<div class="menu" x-ref="context">
					<ul>
						<template x-if="assistant.user.id == $store.user.id">
							<li>
								<a :href="`app/assistants/${assistant.id}`" class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate">
									<i class="text-base ti ti-pencil"></i>

									{{ p__('button', 'Edit') }}
								</a>
							</li>
						</template>

						<li>
							<button type="button" class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="currentResource = assistant; modal.open('delete-modal');">
								<i class="text-base ti ti-trash"></i>

								{{ p__('button', 'Delete') }}
							</button>
						</li>
					</ul>
				</div>
			</div>
		</template>
	</div>
{% endif %}