{data.client.name}

Client record for contacts, addresses, invoices, contracts, and bookings.

{#snippet child({ props })} {/snippet} Edit client Update this client record.

{#snippet children({ props })} Name {/snippet} {#snippet children({ props })} Industry {/snippet} {#snippet children({ props })} Website {/snippet} {#snippet children({ props })} Notes

{/snippet}
								</Control>
								<Field.Error><FieldErrors /></Field.Error>
							</Field.Field>
						</FormField>
						<Dialog.Footer>
							<Dialog.Close
								>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
									>{/snippet}</Dialog.Close
							>
							<Button type="submit">Save changes</Button>
						</Dialog.Footer>
					</form>
				</Dialog.Content>
			</Dialog.Root>
		</div>
	</div>

<div class="grid gap-3 rounded-lg border p-4 sm:grid-cols-2">
		<div>
			<p class="text-xs font-medium text-muted-foreground uppercase">Industry</p>
			<p class="text-sm">{industryLabel(data.client.industry)}</p>
		</div>
		<div>
			<p class="text-xs font-medium text-muted-foreground uppercase">Website</p>
			<p class="text-sm">{data.client.website ?? 'Not set'}</p>
		</div>
		<div class="sm:col-span-2">
			<p class="text-xs font-medium text-muted-foreground uppercase">Notes</p>
			<p class="text-sm whitespace-pre-wrap">{data.client.notes || 'Not set'}</p>
		</div>
	</div>

<Tabs.Root value={activeTab} class="w-full">
		<Tabs.List class="flex h-auto flex-wrap justify-start">
			{#each tabs as tab (tab.value)}
				<Tabs.Trigger
					value={tab.value}
					onclick={() => navigateToTab(tab.value)}
					aria-label={`View ${tab.label.toLowerCase()}`}
				>
					{tab.label}
				</Tabs.Trigger>
			{/each}
		</Tabs.List>
		<div class="mt-4">
			{@render children()}
		</div>
	</Tabs.Root>
</div>