<script lang="ts">
	import * as Select from '$lib/components/ui/select';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import { Textarea } from '$lib/components/ui/textarea/index.js';
	import type { Invoice } from '$lib/api/dashboard/a76/invoices';
	import { m } from '$lib/i18n/messages';
	import { cn } from '$lib/utils';

	let {
		invoice,
		formData = $bindable(),
		exists = $bindable(),
		seals = [],
		incoterms = [],
		valuationMethods = [],
		legends = [],
		enclosure = [],
		operationType = undefined,
		invoiceType = undefined,
		isSettings = false,
		highlightFieldId = null,
		onDismissHighlightForField = undefined
	}: {
		invoice: Invoice | null;
		formData?: any;
		exists?: boolean;
		seals?: any[];
		incoterms?: any[];
		valuationMethods?: any[];
		legends?: any[];
		enclosure?: any[];
		operationType?: number;
		invoiceType?: string;
		isSettings?: boolean;
		highlightFieldId?: string | null;
		onDismissHighlightForField?: (fieldKey: string) => void;
	} = $props();

	function hl(id: string) {
		return cn(highlightFieldId === id && 'ring-2 ring-destructive ring-offset-2 rounded-md');
	}

	function snapshotValueForHighlight(fd: any, key: string): unknown {
		if (!fd) return undefined;
		switch (key) {
			case 'observation_es':
				return fd.observation_es;
			case 'observation_en':
				return fd.observation_en;
			case 'freight':
				return fd.freight;
			case 'incoterm':
				return fd.incoterm;
			default:
				return fd[key];
		}
	}

	let obsHighlightSnapshot = $state<{ key: string; val: unknown } | null>(null);

	$effect(() => {
		const key = highlightFieldId;
		if (!key || !formData) {
			obsHighlightSnapshot = null;
			return;
		}
		const now = snapshotValueForHighlight(formData, key);
		if (!obsHighlightSnapshot || obsHighlightSnapshot.key !== key) {
			obsHighlightSnapshot = { key, val: now };
			return;
		}
		const same =
			JSON.stringify(now) === JSON.stringify(obsHighlightSnapshot.val) ||
			String(now ?? '') === String(obsHighlightSnapshot.val ?? '');
		if (!same) {
			onDismissHighlightForField?.(key);
			obsHighlightSnapshot = null;
		}
	});

	let selectedLegendCode = $state<string>('');

	function appendLegendToEs() {
		const code = selectedLegendCode;
		if (!code) return;
		const legend = legends.find((l) => String(l.code) === String(code));
		const text = legend?.description?.trim();
		if (!text) return;
		const current = (formData.observation_es || '').trim();
		formData.observation_es = current ? `${current}\n${text}` : text;
	}

	if (!formData && invoice) {
		formData = {
			// Campos de observaciones
			observation_es: invoice.observation_es || '',
			observation_en: invoice.observation_en || '',
			// Incrementables
			freight: invoice.financials?.freight || null,
			insurance_value: invoice.financials?.insurance_value || null,
			insurance: invoice.financials?.insurance || null,
			packaging: invoice.financials?.packaging || null,
			other_increments: invoice.financials?.other_increments || null,
			total_increments_mn: invoice.financials?.total_increments_mn || null,
			total_increments_me: invoice.financials?.total_increments_me || null,
			// Incoterm y recinto
			incoterm: invoice.logistics?.incoterm || '',
			enclosure: invoice.compliance_mx?.enclosure || null,
			// Campos de esta pestaña
			num_seals: null,
			movement_type: invoice.compliance_mx?.movement_type || '',
			alternate_invoice: invoice.alternate_invoice || '',
			valuation_method: invoice.compliance_mx?.value_method || '',
			// New fields for Export
			other_deductibles: invoice.financials?.other_deductibles || null,
			proforma_number: invoice.proforma_number || '',
			sub_division: invoice.compliance_mx?.subdivision || '',
			acts_as_cd: invoice.logistics?.acts_as_cd || false,
			identifier_1: invoice.logistics?.identifier_1 || '',
			complement_1: invoice.logistics?.complement_1 || '',
			identifier_2: invoice.logistics?.identifier_2 || '',
			complement_2: invoice.logistics?.complement_2 || '',
			office_document: invoice.compliance_mx?.office_document || '',
			is_mixed: invoice.compliance_mx?.is_mixed || false
		};
		exists = true;
	} else if (!formData) {
		formData = {
			// Campos de observaciones
			observation_es: '',
			observation_en: '',
			// Incrementables
			freight: null,
			insurance_value: null,
			insurance: null,
			packaging: null,
			other_increments: null,
			total_increments_mn: null,
			total_increments_me: null,
			// Incoterm y recinto
			incoterm: '',
			enclosure: null,
			// Campos de esta pestaña
			num_seals: null,
			movement_type: '',
			alternate_invoice: '',
			valuation_method: '',
			// New fields for Export
			other_deductibles: null,
			proforma_number: '',
			sub_division: '',
			acts_as_cd: false,
			identifier_1: '',
			complement_1: '',
			identifier_2: '',
			complement_2: '',
			office_document: '',
			is_mixed: false
		};
		exists = false;
	}
	
	$effect.pre(() => {
		if (formData) {
			if (formData.sub_division === undefined) formData.sub_division = 'no';
			if (formData.acts_as_cd === undefined) formData.acts_as_cd = false;
			if (formData.is_mixed === undefined) formData.is_mixed = false;
			if (formData.incoterm === undefined) formData.incoterm = '';
			if (formData.valuation_method === undefined) formData.valuation_method = '';
		}
	});
</script>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<!-- Left Column: Observations and Catalog Info -->
	<div class="space-y-4">
		<!-- Observations Section -->
		<div class="space-y-4 rounded-md border p-3">
			<div class="space-y-2">
				<h4 class="text-xs font-semibold text-muted-foreground uppercase">
					{operationType === 1 || invoiceType === 'CR'
						? m.invoice_edit_observations_mexican_observation()
						: m.invoice_edit_observations_bilingual_observation()}
				</h4>
				<Textarea
					id="observation_es"
					bind:value={formData.observation_es}
					class={cn(
						'max-h-[150px] min-h-[150px] text-sm font-medium',
						hl('observation_es')
					)}
					placeholder={m.invoice_edit_observations_textarea_placeholder()}
				/>
			</div>

			{#if legends?.length}
				<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2">
					<div class="space-y-1">
						<Label for="legend_code" class="text-xs">{m.invoice_edit_observations_fixed_legend()}</Label>
						<Select.Root
							type="single"
							value={selectedLegendCode}
							onValueChange={(v) => {
								selectedLegendCode = v ?? '';
							}}
						>
							<Select.Trigger id="legend_code" class="h-7 text-xs">
								<span class="truncate">
									{selectedLegendCode
										? `${m.invoice_edit_observations_selected_legend_prefix()} ${selectedLegendCode}`
										: m.invoice_edit_observations_select_legend_placeholder()}
								</span>
							</Select.Trigger>
							<Select.Content class="max-h-[300px]">
								{#each legends as l}
									<Select.Item value={String(l.code)}>
										{l.code} - {l.description || ''}
									</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
					<div class="flex items-end">
						<button
							type="button"
							class="h-7 px-3 rounded-md border text-xs hover:bg-muted"
							onclick={appendLegendToEs}
						>
							{m.invoice_edit_observations_add_to_observations()}
						</button>
					</div>
				</div>
			{/if}

			{#if invoiceType !== 'MEX'}
				<div class="space-y-2">
					<h4 class="text-xs font-semibold text-muted-foreground uppercase">
						{m.invoice_edit_observations_american_observation()}
					</h4>
					<Textarea
						id="observation_en"
						bind:value={formData.observation_en}
						class={cn(
							'max-h-[150px] min-h-[150px] text-sm font-medium',
							hl('observation_en')
						)}
						placeholder={m.invoice_edit_observations_textarea_placeholder()}
					/>
				</div>
			{/if}
		</div>

		{#if operationType === 1 || invoiceType === 'CR'}
			<!-- Identificadores (Export Only) -->
			<div class="space-y-4 rounded-md border bg-muted/20 p-4">
				<h4 class="mb-1 border-b pb-2 text-xs font-bold text-muted-foreground uppercase">
					{m.invoice_edit_observations_identifiers_title()}
				</h4>
				<div class="grid grid-cols-2 gap-4">
					<div class="space-y-1.5">
						<Label for="identifier_1" class="text-xs font-semibold">{m.invoice_edit_observations_first_label()}</Label>
						<Input
							id="identifier_1"
							bind:value={formData.identifier_1}
							class="h-8 text-xs"
							placeholder={m.invoice_edit_observations_key_placeholder()}
						/>
					</div>
					<div class="space-y-1.5">
						<Label for="identifier_2" class="text-xs font-semibold">{m.invoice_edit_observations_second_label()}</Label>
						<Input
							id="identifier_2"
							bind:value={formData.identifier_2}
							class="h-8 text-xs"
							placeholder={m.invoice_edit_observations_key_placeholder()}
						/>
					</div>
				</div>

			<!-- Complementos (Export Only) -->
			<div class="space-y-4 rounded-md border bg-muted/20 p-4">
								<Label for="num_seals" class="text-xs">{m.invoice_edit_observations_seal_count_label()}</Label>
								<Select.Root
									type="single"
									value={formData.num_seals ? String(formData.num_seals) : ''}
									onValueChange={(v) => {
										formData.num_seals = v ? parseInt(v) : null;
									}}
								>
									<Select.Trigger id="num_seals" class="h-7 text-xs">
										<span class="truncate">
											{formData.num_seals
												? seals.find((p) => p.id === formData.num_seals)?.name || m.invoice_edit_observations_valuation_method_placeholder()
												: m.invoice_edit_observations_valuation_method_placeholder()}</span>
									</Select.Trigger>
									<Select.Content class="max-h-[300px]">
										{#each seals as seal}<Select.Item value={String(seal.id)}>{seal.name}</Select.Item>{/each}
									</Select.Content>
								</Select.Root>
				</div>
			</div>
		{/if}
	</div>

	<!-- Right Column: Values, Flags and Logistics -->
	<div class="space-y-4">
		<!-- Incrementables Section -->
		<div class="space-y-3 rounded-md border p-3">
			<h4 class="text-xs font-semibold text-muted-foreground uppercase">{m.invoice_edit_observations_incrementables_title()}</h4>
			<div class="grid grid-cols-2 gap-x-4 gap-y-2">
				<div class="flex items-center">
					<Label for="freight" class="text-xs">{m.invoice_edit_observations_freight_label()}</Label>
				</div>
				<Input
					id="freight"
					type="number"
					bind:value={formData.freight}
					class="h-8 text-sm font-medium"
				/>

				<div class="flex items-center">
					<Label for="insurance" class="text-xs">{m.invoice_edit_observations_insurance_label()}</Label>
				</div>
				<Input
					id="insurance"
					type="number"
					bind:value={formData.insurance}
					class="h-8 text-sm font-medium"
				/>

				<div class="flex items-center">
					<Label for="packaging" class="text-xs">{m.invoice_edit_observations_packaging_label()}</Label>
				</div>
				<Input
					id="packaging"
					type="number"
					bind:value={formData.packaging}
					class="h-8 text-sm font-medium"
				/>

				<div class="flex items-center">
					<Label for="other_increments" class="text-xs leading-none">{m.invoice_edit_observations_other_increments_label()}</Label>
				</div>
				<Input
					id="other_increments"
					type="number"
					bind:value={formData.other_increments}
					class="h-8 text-sm font-medium"
				/>

				{#if operationType === 1 || invoiceType === 'CR'}
					<div class="flex items-center">
						<Label for="other_deductibles" class="text-xs leading-none">{m.invoice_edit_observations_other_deductibles_label()}</Label>
					</div>
					<Input
						id="other_deductibles"
						type="number"
						bind:value={formData.other_deductibles}
						class="h-8 border-orange-200 text-sm font-medium focus-visible:ring-orange-200"
					/>
				{/if}
			</div>
		</div>

		{#if operationType === 1 || invoiceType === 'CR'}
			<!-- Precintos & Tipo Mov Group (No Title) -->
			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 rounded-md border bg-muted/20 p-3">
				<div class="space-y-1">
					<Label for="num_seals_exp" class="text-xs font-semibold">{m.invoice_edit_observations_seal_number_label()}</Label>
					<Select.Root
						type="single"
						value={formData.num_seals ? String(formData.num_seals) : ''}
						onValueChange={(v) => {
							formData.num_seals = v ? parseInt(v) : null;
						}}
					>
						<Select.Trigger id="num_seals_exp" class="h-8 text-xs">
							<span class="truncate">
								{formData.num_seals
									? seals.find((p) => p.id === formData.num_seals)?.name || m.invoice_edit_observations_select_placeholder()
									: m.invoice_edit_observations_select_placeholder()}
							</span>
						</Select.Trigger>
						<Select.Content class="max-h-[300px]">
							{#each seals as seal}
								<Select.Item value={String(seal.id)}>
									{seal.name}
								</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
				<div class="space-y-1">
					<Label for="movement_type_exp" class="text-xs font-semibold">{m.invoice_edit_observations_movement_type_label()}</Label>
					<Input
						id="movement_type_exp"
						bind:value={formData.movement_type}
						class="h-8 text-xs font-medium"
					/>
				</div>
			</div>

			<!-- Factura Alterna & Flags Section -->
			<div class="space-y-4 rounded-md border bg-muted/20 p-4">
				<h4 class="mb-1 border-b pb-2 text-xs font-bold text-muted-foreground uppercase">
						{m.invoice_edit_observations_alternate_flags_title()}
				</h4>
				<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
					<div class="space-y-1.5">
							<Label for="alternate_invoice_exp" class="text-xs font-semibold">{m.invoice_edit_observations_alternate_invoice_label()}</Label
						>
						<Input
							id="alternate_invoice_exp"
							bind:value={formData.alternate_invoice}
							class="h-8 text-xs"
						/>
					</div>
					<div class="space-y-1.5">
							<Label for="proforma_number" class="text-xs font-semibold">{m.invoice_edit_observations_proforma_number_label()}</Label>
						<Input id="proforma_number" bind:value={formData.proforma_number} class="h-8 text-xs" />
					</div>

					<div class="space-y-2 pt-1">
						<Label class="mb-2 block text-xs font-semibold">{m.invoice_edit_observations_subdivision_label()}</Label>
						<div class="flex items-center gap-4">
							<label class="group flex cursor-pointer items-center gap-2">
								<div
									class="relative flex h-4 w-4 items-center justify-center rounded-full border-2 border-zinc-400 transition-all {formData.sub_division ===
									'si'
										? 'border-zinc-800 bg-zinc-800'
										: ''}"
								>
									<input
										type="radio"
										value="si"
										bind:group={formData.sub_division}
										class="sr-only"
									/>
									{#if formData.sub_division === 'si'}
										<div class="h-1.5 w-1.5 rounded-full bg-white"></div>
									{/if}
								</div>
								<span class="text-xs font-medium transition-colors group-hover:text-zinc-800">
									{m.invoice_edit_observations_yes()}
								</span>
							</label>
							<label class="group flex cursor-pointer items-center gap-2">
								<div
									class="relative flex h-4 w-4 items-center justify-center rounded-full border-2 border-zinc-400 transition-all {formData.sub_division ===
									'no'
										? 'border-zinc-800 bg-zinc-800'
										: ''}"
								>
									<input
										type="radio"
										value="no"
										bind:group={formData.sub_division}
										class="sr-only"
									/>
									{#if formData.sub_division === 'no'}
										<div class="h-1.5 w-1.5 rounded-full bg-white"></div>
									{/if}
								</div>
								<span class="text-xs font-medium transition-colors group-hover:text-zinc-800">
									{m.invoice_edit_observations_no()}
								</span>
							</label>
						</div>
					</div>

					<div class="space-y-2 pt-1">
						<Label class="mb-2 block text-xs font-semibold">{m.invoice_edit_observations_acts_as_cd_label()}</Label>
						<div class="flex items-center gap-4">
							<label class="group flex cursor-pointer items-center gap-2">
								<div
									class="relative flex h-4 w-4 items-center justify-center rounded-full border-2 border-zinc-400 transition-all {formData.acts_as_cd ===
									true
										? 'border-zinc-800 bg-zinc-800'
										: ''}"
								>
									<input
										type="radio"
										value={true}
										bind:group={formData.acts_as_cd}
										class="sr-only"
									/>
									{#if formData.acts_as_cd === true}
										<div class="h-1.5 w-1.5 rounded-full bg-white"></div>{/if}
								</div>
								<span class="text-xs font-medium transition-colors group-hover:text-zinc-800"
									>{m.invoice_edit_observations_yes()}</span
								>
							</label>
							<label class="group flex cursor-pointer items-center gap-2">
								<div
									class="relative flex h-4 w-4 items-center justify-center rounded-full border-2 border-zinc-400 transition-all {formData.acts_as_cd ===
									false
										? 'border-zinc-800 bg-zinc-800'
										: ''}"
								>
									<input
										type="radio"
										value={false}
										bind:group={formData.acts_as_cd}
										class="sr-only"
									/>
									{#if formData.acts_as_cd === false}
										<div class="h-1.5 w-1.5 rounded-full bg-white"></div>{/if}
								</div>
								<span class="text-xs font-medium transition-colors group-hover:text-zinc-800"
									>{m.invoice_edit_observations_no()}</span
								>
							</label>
						</div>
					</div>
				</div>
			</div>
		{/if}

		<!-- Incoterm & Recinto (Show for all, layout adjusted) -->
		{#if invoiceType !== 'MEX'}
			<div class="space-y-3 rounded-md border p-3">
				<div class="grid grid-cols-2 gap-4">
					<div class="space-y-1">
						<Label for="incoterm" class="text-xs">{m.invoice_edit_observations_incoterm_label()}</Label>
						<Select.Root
							type="single"
							value={formData.incoterm || ''}
							onValueChange={(v) => {
								formData.incoterm = v ?? '';
							}}
						>
							<Select.Trigger id="incoterm" class={cn('h-7 text-xs', hl('incoterm'))}>
								<span class="truncate"
									>{formData.incoterm || m.invoice_edit_observations_select_placeholder()}</span
								>
							</Select.Trigger>
							<Select.Content class="max-h-[300px]">
								{#each incoterms as inco}
									<Select.Item value={String(inco.code)}>
										{inco.code} - {inco.description_es}
									</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
					<div class="space-y-1">
						<Label for="enclosure" class="text-xs">{m.invoice_edit_observations_enclosure_label()}</Label>
						<Select.Root
							type="single"
							value={formData.enclosure ? String(formData.enclosure) : ''}
							onValueChange={(v) => {
								formData.enclosure = v ? parseInt(v) : null;
							}}
						>
							<Select.Trigger id="enclosure" class="h-7 text-xs">
								<span class="truncate"
									>{formData.enclosure
										? enclosure.find((p) => p.id === formData.enclosure)?.name || m.invoice_edit_observations_select_placeholder()
										: m.invoice_edit_observations_select_placeholder()}</span
								>
							</Select.Trigger>
							<Select.Content class="max-h-[300px]">
								{#each enclosure as rec}
									<Select.Item value={String(rec.id)}>{rec.name}</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
				</div>
				{#if operationType === 1 || invoiceType === 'CR'}
					<div class="space-y-1 pt-1">
						<Label for="valuation_method_exp" class="text-xs font-semibold">{m.invoice_edit_observations_valuation_method_label()}</Label>
						<Select.Root
							type="single"
							value={formData.valuation_method || ''}
							onValueChange={(v) => {
								formData.valuation_method = v ?? '';
							}}
						>
							<Select.Trigger id="valuation_method_exp" class="h-8 text-xs">
								<span class="truncate">{formData.valuation_method || m.invoice_edit_observations_valuation_method_placeholder()}</span>
							</Select.Trigger>
							<Select.Content>
								{#each valuationMethods as m}
									<Select.Item value={String(m.key)}>{m.key} - {m.description}</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
				{/if}
			</div>
		{/if}

		{#if invoiceType === 'MEX'}
			<div class="rounded-md border p-3">
				<div class="space-y-2">
					<Label class="mb-2 block text-xs font-semibold">{m.invoice_edit_observations_mixed_label_short()}</Label>
					<div class="flex items-center gap-4">
						<label class="group flex cursor-pointer items-center gap-2">
							<div
								class="relative flex h-4 w-4 items-center justify-center rounded-full border-2 border-zinc-400 transition-all {formData.is_mixed ===
								true
									? 'border-zinc-800 bg-zinc-800'
									: ''}"
							>
								<input type="radio" value={true} bind:group={formData.is_mixed} class="sr-only" />
								{#if formData.is_mixed === true}
									<div class="h-1.5 w-1.5 rounded-full bg-white"></div>{/if}
							</div>
							<span class="text-xs font-medium transition-colors group-hover:text-zinc-800">{m.invoice_edit_observations_yes()}</span
							>
						</label>
						<label class="group flex cursor-pointer items-center gap-2">
							<div
								class="relative flex h-4 w-4 items-center justify-center rounded-full border-2 border-zinc-400 transition-all {formData.is_mixed ===
								false
									? 'border-zinc-800 bg-zinc-800'
									: ''}"
							>
								<input type="radio" value={false} bind:group={formData.is_mixed} class="sr-only" />
								{#if formData.is_mixed === false}
									<div class="h-1.5 w-1.5 rounded-full bg-white"></div>{/if}
							</div>
							<span class="text-xs font-medium transition-colors group-hover:text-zinc-800">{m.invoice_edit_observations_no()}</span
							>
						</label>
					</div>
				</div>
			</div>
		{/if}
	</div>

	<!-- Extra Bottom Row for Import Mode specific fields (Original Layout preserved for Import) -->
	{#if operationType !== 1 && invoiceType !== 'MEX' && invoiceType !== 'CR'}
	<div class="col-span-1 md:col-span-2 space-y-3 rounded-md border p-3">
		<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
				<div class="space-y-1">
					<Label for="num_seals" class="text-xs">{m.invoice_edit_observations_seal_count_label()}</Label>
					<Select.Root
						type="single"
						value={formData.num_seals ? String(formData.num_seals) : ''}
						onValueChange={(v) => {
							formData.num_seals = v ? parseInt(v) : null;
						}}
					>
						<Select.Trigger id="num_seals" class="h-7 text-xs">
							<span class="truncate"
								>{formData.num_seals
									? seals.find((p) => p.id === formData.num_seals)?.name || m.invoice_edit_observations_valuation_method_placeholder()
									: m.invoice_edit_observations_valuation_method_placeholder()}</span
							>
						</Select.Trigger>
						<Select.Content class="max-h-[300px]">
							{#each seals as seal}<Select.Item value={String(seal.id)}>{seal.name}</Select.Item
								>{/each}
						</Select.Content>
					</Select.Root>
				</div>
				<div class="space-y-1">
					<Label for="movement_type" class="text-xs">{m.invoice_edit_observations_movement_type_label()}</Label>
					<Input
						id="movement_type"
						bind:value={formData.movement_type}
						class="h-8 text-sm font-medium"
					/>
				</div>
				<div class="space-y-1">
					<Label for="alternate_invoice" class="text-xs">{m.invoice_edit_observations_alternate_invoice_label()}</Label>
					<Input
						id="alternate_invoice"
						bind:value={formData.alternate_invoice}
						class="h-8 text-sm font-medium"
					/>
				</div>
				<div class="space-y-1">
					<Label for="valuation_method" class="text-xs">{m.invoice_edit_observations_valuation_method_label()}</Label>
					<Select.Root
						type="single"
						value={formData.valuation_method || ''}
						onValueChange={(v) => {
							formData.valuation_method = v ?? '';
						}}
					>
						<Select.Trigger id="valuation_method" class="h-7 text-xs">
							<span class="truncate">{formData.valuation_method || m.invoice_edit_observations_valuation_method_placeholder()}</span>
						</Select.Trigger>
						<Select.Content class="max-h-[300px]">
							{#each valuationMethods as m}
								<Select.Item value={String(m.key)}>{m.key} - {m.description}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
			</div>
		</div>
	{/if}
</div>
