<div x-data="audience({{ ref ?? 'preview' }})" x-model="{{ ref ?? 'preview' }}" x-modelable="item">

	<template x-if="item">
		<button type="button" class="button button-dimmed button-xs" @click="modal.open('audience-modal')">
			<template x-if="item.visibility === 0">
				<span class="flex gap-1 items-center">
					<i class="ti ti-lock"></i>
					{{ p__('audience', 'Only me') }}
				</span>
			</template>

			<template x-if="item.visibility === 1">
				<span class="flex gap-1 items-center">
					<i class="ti ti-building"></i>
					{{ p__('audience', 'Workspace') }}
				</span>
			</template>
		</button>
	</template>

	<template x-if="item">
		<modal-element name="audience-modal">
			<div class="flex flex-col gap-6 modal">
				<div class="flex justify-between items-center">
					<h2 class="text-xl">{{ p__('heading', 'Select audience') }}</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-1">
					<template x-if="item.user && item.user.id != $store.user.id">
						<div class="flex gap-4 items-center box group">
							<x-avatar :title="`${item.user.first_name} ${item.user.last_name}`" :src="item.user.avatar"></x-avatar>

							<div>
								<div class="font-bold" x-text="`${item.user.first_name} ${item.user.last_name}`"></div>
								<div class="text-xs text-content-dimmed">
									{{ __('Item will be accessible only by owner.') }}</div>
							</div>

							<template x-if="item.visibility === 0">
								<button type="button" disabled class="ms-auto button button-xs button-dimmed">
									{{ p__('badge', 'Selected') }}
								</button>
							</template>

							<template x-if="item.visibility !== 0">
								<button type="button" :processing="isProcessing===0" class="invisible ms-auto button button-xs button-dimmed group-hover:visible" @click="changeAudience(0)">
									{% include "/snippets/spinner.twig" %}
									{{ p__('badge', 'Select') }}
								</button>
							</template>
						</div>
					</template>

					<template x-if="item.user && item.user.id == $store.user.id">
						<div class="flex gap-4 items-center box group">
							<x-avatar icon="lock"></x-avatar>

							<div>
								<div class="font-bold">{{ p__('audience', 'Only me') }}</div>
								<div class="text-xs text-content-dimmed">
									{{ __('Item is only accessible by you.') }}</div>
							</div>

							<template x-if="item.visibility === 0">
								<button type="button" disabled class="ms-auto button button-xs button-dimmed">
									{{ p__('badge', 'Selected') }}
								</button>
							</template>

							<template x-if="item.visibility !== 0">
								<button type="button" :processing="isProcessing===0" class="invisible ms-auto button button-xs button-dimmed group-hover:visible" @click="changeAudience(0)">
									{% include "/snippets/spinner.twig" %}
									{{ p__('badge', 'Select') }}
								</button>
							</template>
						</div>
					</template>

					<div class="flex gap-4 items-center box group">
						<x-avatar icon="building"></x-avatar>

						<div>
							<div class="font-bold">{{ p__('audience', 'Workspace') }}</div>
							<div class="text-xs text-content-dimmed">
								{{ __('Accesible by team members. Can be managed by workspace owner.') }}
							</div>
						</div>

						<template x-if="item.visibility === 1">
							<button type="button" disabled class="ms-auto button button-xs button-dimmed">
								{{ p__('badge', 'Selected') }}
							</button>
						</template>

						<template x-if="item.visibility !== 1">
							<button type="button" :processing="isProcessing===1" class="invisible ms-auto button button-xs button-dimmed group-hover:visible" @click="changeAudience(1)">
								{% include "/snippets/spinner.twig" %}
								{{ p__('badge', 'Select') }}
							</button>
						</template>
					</div>
				</div>
			</div>
		</modal-element>
	</template>
</div>
