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

{% set xdata = 'workspace' %}
{% block title p__('title', 'Workspace')|title %}

{% block template %}
	<div>
		{% include "snippets/back.twig" with {link: 'app', label: p__('button', 'Dashboard')} %}

		<h1 class="mt-4">{{ p__('heading', 'Workspace Overview') }}</h1>
		<x-uuid x-text="$store.workspace.id"></x-uuid>
	</div>

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

			<div class="flex flex-col gap-1">
				<div class="flex justify-between items-center p-4 rounded-2xl bg-intermediate text-intermediate-content">
					<div>
						<label>{{ p__('label', 'Workspace name') }}</label>
						<div x-text="$store.workspace.name"></div>
					</div>

					<template x-if="$store.workspace.owner.id == $store.user.id">
						<button type="button" @click="modal.open('workspace-name')" class="flex justify-center items-center w-8 h-8 rounded-full bg-main outline-1 outline-line hover:outline outline-offset-0">
							<i class="text-base ti ti-pencil"></i>
						</button>
					</template>
				</div>

				<div class="p-4 rounded-2xl bg-intermediate">
					<label>{{ p__('label', 'Subscription') }}</label>

					<template x-if="$store.workspace.subscription">
						<p>
							{{ __("Your workspace is currently subscribed to %s.")|format('<strong x-text="$store.workspace.subscription.plan.title"></strong>')|raw }}

							<template x-if="$store.workspace.subscription.plan.price <= 0">
								<span>
									{{ __('Subscribe to one of the our plans to get access to all features and benefits.') }}
								</span>
							</template>
						</p>
					</template>

					<template x-if="!$store.workspace.subscription">
						<p>
							{{ __("Currently this workspace doesn't have any active subscription. Subscribe to one of the our plans to get access to all features and benefits.") }}
						</p>
					</template>

					<div class="mt-4">
						<a href="app/billing" class="button button-sm button-secondary">
							{{ p__('button', 'Billing overview') }}
						</a>
					</div>
				</div>
			</div>
		</section>

		<section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
			<div class="flex justify-between items-center">
				<div>
					<h2>{{ p__('heading', 'Team') }}</h2>
					<div class="text-sm text-content-dimmed">
						{{ n__('Total :count member', 'Total :count members', workspace.users|length + 1)|replace({':count' : '<span x-text="$store.workspace.users.length + 1"></span>'})|raw }}
					</div>
				</div>

				<template x-if="$store.user.id == $store.workspace.owner.id == 1">
					<div class="relative">
						<button type="button" class="w-9 h-9 rounded-full md:rounded-md md:w-auto button button-sm button-accent" @click="modal.open('workspace-invite')" :disabled="!$store.workspace.subscription || ($store.workspace.subscription.plan.member_cap !== null && $store.workspace.users.length + $store.workspace.invitations.length >= $store.workspace.subscription.plan.member_cap)">
							<i class="ti ti-plus"></i>

							<span class="hidden md:inline">
								{{ p__('button', 'Invite member') }}
							</span>
						</button>

						<template x-if="!$store.workspace.subscription">
							<div class="flex absolute inset-0" x-tooltip.raw.placement.top-end="{{ __('Subscribe to a plan to invite members.') }}"></div>
						</template>

						<template x-if="$store.workspace.subscription?.plan.member_cap !== null && $store.workspace.users.length + $store.workspace.invitations.length >= $store.workspace.subscription?.plan.member_cap">
							<div class="flex absolute inset-0" x-tooltip.raw.placement.top-end="{{ __('Upgrade your plan to invite more members.') }}"></div>
						</template>
					</div>
				</template>
			</div>

			<ul class="flex flex-col gap-1">
				<li class="grid relative grid-cols-4 gap-3 items-center p-3 box" x-data>
					<div class="flex col-span-3 gap-3 items-start md:col-span-2">
						<x-avatar :title="`${$store.workspace.owner.first_name} ${$store.workspace.owner.last_name}`" :src="$store.workspace.owner.avatar"></x-avatar>

						<div>
							<div class="flex gap-2 items-center">
								<div class="font-bold" x-text="`${$store.workspace.owner.first_name} ${$store.workspace.owner.last_name}`"></div>

								<template x-if="$store.workspace.owner.id == $store.user.id">
									<span class="hidden badge badge-success md:flex">{{ __('You') }}</span>
								</template>
							</div>

							<div class="text-xs text-content-dimmed" x-text="$store.workspace.owner.email"></div>

							<div class="flex gap-1 items-center mt-2 md:hidden">
								<template x-if="$store.workspace.owner.id == $store.user.id">
									<span class="badge badge-success">{{ __('You') }}</span>
								</template>

								<span class="badge">
									{{ p__('input-value', 'Owner') }}
								</span>
							</div>
						</div>
					</div>

					<div class="hidden justify-self-start md:block">
						<div class="badge">
							{{ p__('input-value', 'Owner') }}
						</div>
					</div>

					<div class="justify-self-end"></div>
				</li>

				<template x-for="u in $store.workspace.users" :key="u.id">
					<li class="grid relative grid-cols-4 gap-3 items-center p-3 box" x-data>
						<div class="flex col-span-3 gap-3 items-start md:col-span-2">
							<x-avatar :title="`${u.first_name} ${u.last_name}`" :src="u.avatar"></x-avatar>

							<div>
								<div class="flex gap-2 items-center">
									<div class="font-bold" x-text="`${u.first_name} ${u.last_name}`"></div>

									<template x-if="u.id == $store.user.id">
										<span class="hidden badge badge-success md:flex">{{ __('You') }}</span>
									</template>
								</div>

								<div class="text-xs text-content-dimmed" x-text="u.email"></div>

								<div class="flex gap-1 items-center mt-2 md:hidden">
									<template x-if="u.id == $store.user.id">
										<span class="badge badge-success">{{ __('You') }}</span>
									</template>

									<span class="badge">
										{{ p__('input-value', 'Member') }}
									</span>
								</div>
							</div>
						</div>

						<div class="hidden justify-self-start md:block">
							<div class="badge">
								{{ p__('input-value', 'Member') }}
							</div>
						</div>

						<div class="justify-self-end">
							<template x-if="$store.user.id == $store.workspace.owner.id || u.id == $store.user.id">
								<div class="relative" @click.outside="$refs.context.removeAttribute('data-open')">

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

									<div class="menu" x-ref="context">
										<ul>
											<template x-if="u.id == $store.user.id">
												<li>
													<button class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="modal.open('leave-modal')">
														<i class="ti ti-arrow-right"></i>

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

											<template x-if="$store.user.id == $store.workspace.owner.id && $store.user.owned_workspaces.length > 1">
												<li>
													<button class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="currentResource = u; modal.open('transfer-ownership-modal')">
														<i class="ti ti-transfer"></i>

														{{ p__('button', 'Transfer ownership') }}
													</button>
												</li>
											</template>

											<template x-if="$store.user.id == $store.workspace.owner.id">
												<li>
													<button class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="currentResource = u; modal.open('delete-modal')">
														<i class="ti ti-x"></i>

														{{ p__('button', 'Remove user') }}
													</button>
												</li>
											</template>
										</ul>
									</div>
								</div>
							</template>
						</div>
					</li>
				</template>

				<template x-for="u in $store.workspace.invitations" :key="u.id">
					<li class="grid relative grid-cols-4 gap-3 items-center p-3 box" x-data>
						<div class="flex col-span-3 gap-3 items-start md:col-span-2">
							<x-avatar :title="u.email"></x-avatar>

							<div>
								<div class="mt-3 text-xs text-content-dimmed" x-text="u.email"></div>

								<div class="flex gap-1 items-center mt-2 md:hidden">
									<div class="opacity-50 badge">
										{{ p__('input-value', 'Invited') }}
									</div>

									<x-copy class="button button-xs button-dimmed" x-tooltip.raw="{{ __("Click to copy invitation link") }}" class="flex gap-1 items-center" :data-copy="`${window.location.origin}/app/workspace/${ $store.workspace.id }/invitations/${ u.id}`">
										<i class="ti ti-link"></i>
									</x-copy>
								</div>
							</div>
						</div>

						<div class="hidden justify-self-start md:block">
							<div class="flex gap-2 items-center">
								<div class="opacity-50 badge">
									{{ p__('input-value', 'Invited') }}
								</div>

								<x-copy class="button button-xs button-dimmed" x-tooltip.raw="{{ __("Click to copy invitation link") }}" class="flex gap-1 items-center" :data-copy="`${window.location.origin}/app/workspace/${ $store.workspace.id }/invitations/${ u.id}`">
									<i class="ti ti-link"></i>
								</x-copy>
							</div>
						</div>

						<div class="justify-self-end">
							<template x-if="isProcessing && currentResource && currentResource.id == u.id">
								<div>
									{% include "/snippets/spinner.twig" %}
								</div>
							</template>

							<template x-if="$store.user.id == $store.workspace.owner.id && !(isProcessing && currentResource && currentResource.id == u.id)">
								<div class="relative" @click.outside="$refs.context.removeAttribute('data-open')">

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

									<div class="menu" x-ref="context">
										<ul>
											<li>
												<button class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="currentResource = u; $refs.context.removeAttribute('data-open'); inviteMember($store.workspace.id, u.email)">
													<i class="ti ti-transfer"></i>

													{{ p__('button', 'Resend invitation') }}
												</button>
											</li>

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

													{{ p__('button', 'Remove invitation') }}
												</button>
											</li>
										</ul>
									</div>
								</div>
							</template>
						</div>
					</li>
				</template>
			</ul>
		</section>

		{% if option.features.voiceover.is_enabled|default(false) and option.features.voiceover.is_voice_cloning_enabled|default(false) %}
			<template x-if="$store.user.id == $store.workspace.owner.id">
				<div x-init="fetchClonedVoices()" x-show="voiceCount > 0 && voices.length > 0">
					<section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
						<div class="flex gap-2 items-center">
							<h2>{{ p__('heading', 'Cloned voices') }}</h2>

							<a class="badge" :href="`app/voiceover/voices?owner=workspace`">
								{{ p__('button', 'View all') }}

								<span x-text="`(${voiceCount})`"></span>
							</a>
						</div>

						<ul class="flex flex-col gap-1">
							<template x-for="voice in voices" :key="voice.id">
								<li class="grid relative grid-cols-4 gap-3 items-center p-3 box" x-data>
									<div class="flex col-span-3 gap-3 items-start md:col-span-2">
										<x-avatar :title="`${voice.name}`"></x-avatar>

										<div>
											<div class="font-bold" x-text="`${voice.name}`"></div>

											<div class="flex gap-1 items-center text-xs text-content-dimmed">
												<template x-if="voice.user?.id == $store.user.id">
													<div>{{ __('By you') }}</div>
												</template>

												<template x-if="voice.user?.id != $store.user.id">
													<div>
														{% set by %}
														<span x-text="`${voice.user.first_name} ${voice.user.last_name}`"></span>
														{% endset %}

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

												<i class="text-xs text-content-success ti ti-point-filled"></i>

												<x-time :datetime="voice.created_at" data-type="datetime"></x-time>
											</div>

										</div>
									</div>

									<div class="hidden justify-self-start md:block"></div>

									<div class="justify-self-end">
										<template x-if="voice.visibility === 0">
											<i class="text-2xl ti ti-lock" x-tooltip.placement.left.raw="{{ __('Accessible to owner only') }}"></i>
										</template>

										<template x-if="voice.visibility === 1">
											<i class="text-2xl ti ti-building" x-tooltip.placement.left.raw="{{ __('Accessible to all workspace members') }}"></i>
										</template>

										<template x-if="voice.visibility === 2">
											<i class="text-2xl ti ti-world" x-tooltip.placement.left.raw="{{ __('Accessible to all users') }}"></i>
										</template>
									</div>
								</li>
							</template>
						</ul>

						<div>
							<div class="label">{{ p__('label', 'Important notes:') }}</div>

							<ul class="info mt-2">
								<li>
									{{ p__('label', 'You (workspace owner) can view and delete all cloned voices created by other members.') }}
								</li>

								<li>
									{{ p__('label', 'Only owner of the cloned voice can manage it.') }}
								</li>

								<li>
									{{ p__('label', 'Cloned voices are not accessible to other workspace members unless shared.') }}
								</li>
							</ul>
						</div>
					</section>
				</div>
			</template>
		{% endif %}

		{% if option.features.chat.is_enabled|default(false) and option.features.chat.custom_assistants.is_enabled|default(false) %}
			<template x-if="$store.user.id == $store.workspace.owner.id">
				<div x-init="fetchAssistants()" x-show="assistantCount > 0 && assistants.length > 0">
					<section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
						<div class="flex gap-2 items-center">
							<h2>{{ p__('heading', 'Custom assistants') }}</h2>

							<a class="badge" :href="`app/assistants?owner=workspace`">
								{{ p__('button', 'View all') }}

								<span x-text="`(${assistantCount})`"></span>
							</a>
						</div>

						<ul class="flex flex-col gap-1">
							<template x-for="assistant in assistants" :key="assistant.id">
								<li class="grid relative grid-cols-4 gap-3 items-center p-3 box" x-data>
									<div class="flex col-span-3 gap-3 items-start md:col-span-2">
										<x-avatar icon="box" :src="assistant.avatar" :title="assistant.name"></x-avatar>

										<div>
											<div class="font-bold" x-text="`${assistant.name}`"></div>

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

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

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

												<i class="text-xs text-content-success ti ti-point-filled"></i>

												<x-time :datetime="assistant.created_at" data-type="datetime"></x-time>
											</div>

										</div>
									</div>

									<div class="hidden justify-self-start md:block"></div>

									<div class="justify-self-end">
										<template x-if="assistant.visibility === 0">
											<i class="text-2xl ti ti-lock" x-tooltip.placement.left.raw="{{ __('Accessible to owner only') }}"></i>
										</template>

										<template x-if="assistant.visibility === 1">
											<i class="text-2xl ti ti-building" x-tooltip.placement.left.raw="{{ __('Accessible to all workspace members') }}"></i>
										</template>

										<template x-if="assistant.visibility === 2">
											<i class="text-2xl ti ti-world" x-tooltip.placement.left.raw="{{ __('Accessible to all users') }}"></i>
										</template>
									</div>
								</li>
							</template>
						</ul>

						<div>
							<div class="label">{{ p__('label', 'Important notes:') }}</div>

							<ul class="info mt-2">
								<li>
									{{ p__('label', 'You (workspace owner) can view and delete all custom assistants created by other members.') }}
								</li>

								<li>
									{{ p__('label', 'Only owner of the custom assistant can manage it.') }}
								</li>

								<li>
									{{ p__('label', 'Custom assistants are not accessible to other workspace members unless shared.') }}
								</li>
							</ul>
						</div>
					</section>
				</div>
			</template>
		{% endif %}

		{% if 
      workspace.owner.id == user.id and
      (
        (option.openai.custom_keys_enabled is defined and option.openai.custom_keys_enabled)
        or (option.anthropic.custom_keys_enabled is defined and option.anthropic.custom_keys_enabled)
      )
    %}
			<x-form>
				<form @submit.prevent="saveKeys($store.workspace.id);">
					<section class="flex flex-col gap-6 box" data-density="comfortable">
						<h2 class="flex gap-2 items-center">
							<span>
								{{ p__('heading', 'Custom Keys') }}

								(<abbr title="" x-tooltip.raw="{{ p__('label', 'Bring Your Own Key') }}" class="underline-offset-4 decoration-content-dimmed">{{ p__('label', 'BYOK') }}</abbr>)
							</span>

							<i class="text-base cursor-auto ti ti-test-pipe text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('This feature is experimental') }}"></i>
						</h2>

						{% if option.openai.custom_keys_enabled is defined and option.openai.custom_keys_enabled %}
							<div>
								<label for="openai_api_key">
									{{ p__('label', 'OpenAI API Key') }}
								</label>

								<div class="relative mt-2" x-data="{isVisible: false}">
									<input class="pe-11 input" :type="isVisible ? 'text' : 'password'" id="openai_api_key" autocomplete="off" placeholder="{{ __('Include Open AI API key for this workspace') }}" x-model="$store.workspace.openai_api_key">

									<button type="button" class="absolute end-3 top-1/2 text-2xl -translate-y-1/2 text-content-dimmed" @click="isVisible = !isVisible">
										<i class="block ti" :class="{'ti-eye-closed' : isVisible, 'ti-eye':!isVisible}"></i>
									</button>
								</div>
							</div>
						{% endif %}

						{% if option.anthropic.custom_keys_enabled is defined and option.anthropic.custom_keys_enabled %}
							<div>
								<label for="anthropic_api_key">
									{{ p__('label', 'Anthropic/Claude API Key') }}
								</label>

								<div class="relative mt-2" x-data="{isVisible: false}">
									<input class="pe-11 input" :type="isVisible ? 'text' : 'password'" id="anthropic_api_key" autocomplete="off" placeholder="{{ __('Include Anthropic API key for this workspace') }}" x-model="$store.workspace.anthropic_api_key">

									<button type="button" class="absolute end-3 top-1/2 text-2xl -translate-y-1/2 text-content-dimmed" @click="isVisible = !isVisible">
										<i class="block ti" :class="{'ti-eye-closed' : isVisible, 'ti-eye':!isVisible}"></i>
									</button>
								</div>
							</div>
						{% endif %}

						<div>
							<div class="label">{{ p__('label', 'Important notes:') }}</div>

							<ul class="info mt-2">
								<li>
									{{ p__('label', 'When using custom API keys, calls to those specific services will not deduct workspace credits. API calls to other services will still consume credits.') }}
								</li>

								<li>
									{{ p__('label', 'Custom keys will be used by all workspace members. Leave fields empty to use system-wide keys.') }}
								</li>

								<li>
									{{ p__('label', 'API keys with full permissions are recommended to ensure all features work properly.') }}
								</li>

								<li>
									{{ p__('label', 'Custom keys can only be managed by workspace owner') }}
								</li>
							</ul>
						</div>

						<div>
							<button type="submit" class="button button-sm min-w-24" :processing="isProcessing">
								{% include "/snippets/spinner.twig" %}

								<span class="hidden md:inline">
									{{ p__('button', 'Save') }}
								</span>
							</button>
						</div>
					</section>
				</form>
			</x-form>
		{% endif %}

		{# Plugin-injected sections #}
		{% for section in nav.app.workspace.sections.items|default([]) %}
			{% if section.template is defined %}
				{% include section.template %}
			{% endif %}
		{% endfor %}

		<template x-if="$store.user.id == $store.workspace.owner.id && $store.user.owned_workspaces.length > 1">
			<section class="flex flex-col gap-6 box" data-density="comfortable">
				<h2>{{ p__('heading', 'Danger zone') }}</h2>

				<div class="flex justify-between items-center">
					<div class="">
						<label>{{ p__('label', 'Delete workspace') }}</label>
						<div>
							{{ __('Once you delete a workspace, there is no going back. Please be certain.') }}
						</div>
					</div>

					<button type="button" class="button button-outline button-sm text-failure" @click="modal.open('delete-wroksapce-modal')">
						{{ p__('button', 'Delete workspace') }}
					</button>
				</div>
			</section>
		</template>
	</div>

	<modal-element name="transfer-ownership-modal">
		<template x-if="currentResource">
			<form class="modal" @submit.prevent="transferOwnership($store.workspace.id, currentResource.id);">
				<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-transfer"></i>
					</div>
				</div>

				<div class="mt-4 text-lg text-center">
					{% set full_name %}
					<strong x-text="`${currentResource.first_name} ${currentResource.last_name}`"></strong>
					{% endset %}

					{{ __('Do you really want to transfer workspace ownership to :full_name?')|replace({':full_name': full_name})|raw }}
				</div>

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

					<button class="button button-failure" type="submit" :processing="isProcessing">
						{% include "/snippets/spinner.twig" %}
						{{ p__('button', 'Transfer ownership') }}
					</button>
				</div>
			</form>
		</template>
	</modal-element>

	<modal-element name="delete-wroksapce-modal">
		<form class="modal" @submit.prevent="deleteWorkspace($store.workspace.id); modal.close()">
			<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="mt-4 text-lg text-center">
				{% set title_html %}
				<strong x-text="$store.workspace.name"></strong>
				{% endset %}

				{{ __('Do you really want to remove :title workspace?')|replace({':title': title_html})|raw }}
			</div>

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

				<button class="button button-failure" type="submit">
					{{ p__('button', 'Yes, remove') }}
				</button>
			</div>
		</form>
	</modal-element>

	<modal-element name="delete-invitation">
		<template x-if="currentResource">
			<form class="modal" @submit.prevent="deleteInvitation($store.workspace.id, currentResource.id); modal.close()">
				<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="mt-4 text-lg text-center">
					{{ __('Do you really want to delete the invitation?') }}
				</div>

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

					<button class="button button-failure" type="submit">
						{{ p__('button', 'Yes, delete') }}
					</button>
				</div>
			</form>
		</template>
	</modal-element>

	<modal-element name="delete-modal">
		<template x-if="currentResource">
			<form class="modal" @submit.prevent="removeMember($store.workspace.id, currentResource.id); modal.close()">
				<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="mt-4 text-lg text-center">
					{% set title_html %}
					<strong x-text="`${currentResource.first_name} ${currentResource.last_name}`"></strong>
					{% endset %}

					{{ __('Do you really want to remove :title from workspace?')|replace({':title': title_html})|raw }}
				</div>

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

					<button class="button button-failure" type="submit">
						{{ p__('button', 'Yes, remove') }}
					</button>
				</div>
			</form>
		</template>
	</modal-element>

	<modal-element name="leave-modal">
		<form class="modal" @submit.prevent="removeMember($store.workspace.id, $store.user.id); modal.close()">
			<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-arrow-right"></i>
				</div>
			</div>

			<div class="mt-4 text-lg text-center">
				{% set title_html %}
				<strong x-text="$store.workspace.name"></strong>
				{% endset %}

				{{ __('Do you really want to leave :name workspace?')|replace({':name': title_html})|raw }}
			</div>

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

				<button class="button button-failure">
					{{ p__('button', 'Leave workspace') }}
				</button>
			</div>
		</form>
	</modal-element>

	<modal-element name="workspace-name" x-data="workspace">
		<x-form>
			<form class="flex flex-col gap-8 modal" @submit.prevent="rename($store.workspace.id, $refs.name.value)">
				<div class="flex justify-between items-center">
					<h2 class="text-xl">{{ p__('heading', 'Rename workspace') }}</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>
					<label for="workspace-name">{{ p__('label', 'Workspace name') }}</label>
					<input type="text" class="mt-2 input" id="workspace-name" required x-ref="name" :value.trim="$store.workspace.name">
				</div>

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

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

						{{ p__('button', 'Save changes') }}
					</button>
				</div>
			</form>
		</x-form>
	</modal-element>

	<modal-element name="workspace-invite" x-data="workspace">
		<x-form>
			<form class="flex flex-col gap-8 modal" @submit.prevent="inviteMember($store.workspace.id, $refs.email.value)">
				<div class="flex justify-between items-center">
					<h2 class="text-xl">{{ p__('heading', 'Invite member') }}</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>
					<label for="workspace-member-email">
						{{ p__('label', 'Member email') }}
					</label>

					<input type="email" class="mt-2 input" id="workspace-member-email" required x-ref="email" placeholder="">
				</div>

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

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

						{{ p__('button', 'Send invitation') }}
					</button>
				</div>
			</form>
		</x-form>
	</modal-element>
{% endblock %}

{% block scripts %}
	{{ parent() }}

	{% if show_invitation_accepted_toast is defined %}
		<script>
			let str = "You've been added to the :name workspace!";
let msg = window.locale.messages[str] || str
window.toast.show(msg.replace(":name", '<strong class="font-bold">              {{ workspace.name }}</strong>'), 'text-2xl ti ti-square-rounded-check-filled');
		</script>
	{% endif %}
{% endblock %}