{employee?.First_Name} {employee?.Last_Name}

{#if employee}

{/if}

{#if employee} {#if patchError}

{patchError}

{/if}

First name {#if editMode} (employee = { ...employee!, First_Name: (e.currentTarget as HTMLInputElement).value })} onblur={() => patchField('First_Name', employee?.First_Name ?? '')} disabled={patchSaving} /> {:else}

{employee.First_Name || '—'}

{/if}

Last name {#if editMode} (employee = { ...employee!, Last_Name: (e.currentTarget as HTMLInputElement).value })} onblur={() => patchField('Last_Name', employee?.Last_Name ?? '')} disabled={patchSaving} /> {:else}

{employee.Last_Name || '—'}

{/if}

Status {#if editMode} (employee = { ...employee!, Status: (e.currentTarget as HTMLInputElement).value })} onblur={() => patchField('Status', employee?.Status ?? '')} disabled={patchSaving} /> {:else}

{employee.Status || '—'}

{/if}

Phone {#if editMode} (employee = { ...employee!, Phone_Number: (e.currentTarget as HTMLInputElement).value })} onblur={() => patchField('Phone_Number', employee?.Phone_Number ?? '')} disabled={patchSaving} /> {:else}

{employee.Phone_Number || '—'}

{/if}

Email {#if editMode} (employee = { ...employee!, Email_Address: (e.currentTarget as HTMLInputElement).value })} onblur={() => patchField('Email_Address', employee?.Email_Address ?? '')} disabled={patchSaving} /> {:else}

{#if employee.Email_Address} {employee.Email_Address} {:else} — {/if}

{/if}

Voxer ID {#if editMode} (employee = { ...employee!, Voxer_ID: (e.currentTarget as HTMLInputElement).value })} onblur={() => patchField('Voxer_ID', employee?.Voxer_ID ?? '')} disabled={patchSaving} /> {:else}

{employee.Voxer_ID || '—'}

{/if}

{#if editMode}

(employee = { ...employee!, Notes: (e.currentTarget as HTMLTextAreaElement).value })}
							onblur={() => patchField('Notes', employee?.Notes ?? '')}
							disabled={patchSaving}
							rows="6"
						/>
					{:else}
						{#if employee.Notes}
							<div
								class="prose prose-sm dark:prose-invert max-w-none text-foreground [&_a]:text-primary [&_a]:underline [&_ul]:list-disc [&_ol]:list-decimal"
							>
								{@html employee.Notes}
							</div>
						{:else}
							<p class="text-muted-foreground text-sm">No notes.</p>
						{/if}
					{/if}
				</Card.Content>
			</Card.Root>
		</div>
		{#if patchSaving}
			<p class="text-muted-foreground text-sm">Saving…</p>
		{/if}

<div class="space-y-4">
			<div class="flex items-center justify-between gap-4">
				<h2 class="text-lg font-semibold tracking-tight">Reports</h2>
				<Button size="sm" onclick={openCreateReportDialog}>
					<PlusIcon class="size-4" />
					Add report
				</Button>
			</div>
			{#if reports.length > 0}
				<div class="flex flex-col gap-4">
					{#each reports as report (report.id)}
						<Card.Root class="flex flex-col">
							<Card.Header class="flex flex-row items-start justify-between gap-2 space-y-0 pb-2">
								<div class="flex flex-col gap-0.5">
									<Card.Title class="text-base">Report</Card.Title>
									<p class="text-muted-foreground text-xs">
										Created {formatDate(report.created)} · Updated {formatDate(report.updated)}
									</p>
								</div>
								<div class="flex shrink-0 gap-1">
									<Button
										variant="ghost"
										size="icon"
										class="size-8"
										onclick={() => openEditReportDialog(report)}
										aria-label="Edit report"
									>
										<PencilIcon class="size-4" />
									</Button>
									<Button
										variant="ghost"
										size="icon"
										class="size-8 text-destructive hover:text-destructive"
										onclick={() => openDeleteReportDialog(report)}
										aria-label="Delete report"
									>
										<Trash2Icon class="size-4" />
									</Button>
								</div>
							</Card.Header>
							<Card.Content class="flex-1 pt-0 space-y-3">
								<p class="text-sm whitespace-pre-wrap">{report.report || '—'}</p>
								{@const voxersList = parseVoxers(report)}
								{#if voxersList.length > 0}
									<div class="flex flex-wrap gap-2">
										{#each voxersList as vox (vox.url + vox.label)}
											<a
												href={vox.url}
												target="_blank"
												rel="noopener noreferrer"
												class={badgeVariants({ variant: 'link' }) + ' cursor-pointer no-underline'}
											>
												<LinkIcon class="mr-1 inline size-3" />
												{vox.label || 'Link'}
											</a>
										{/each}
									</div>
								{/if}
							</Card.Content>
						</Card.Root>
					{/each}
				</div>
			{:else}
				<p class="text-muted-foreground text-sm">No reports yet. Add one to get started.</p>
			{/if}
		</div>
	{:else}
		<p class="text-muted-foreground">Employee not found.</p>
		<Button variant="outline" onclick={loadEmployee}>Retry</Button>
	{/if}
</main>

<Dialog.Root bind:open={openDelete}>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Delete employee</Dialog.Title>
			<Dialog.Description>
				Are you sure you want to delete
				{#if employee}
					<strong>{employee.First_Name} {employee.Last_Name}</strong>?
				{/if}
				This cannot be undone.
			</Dialog.Description>
		</Dialog.Header>
		{#if deleteError}
			<p class="text-destructive text-sm">{deleteError}</p>
		{/if}
		<Dialog.Footer>
			<Dialog.Close asChild>
				<Button type="button" variant="outline">Cancel</Button>
			</Dialog.Close>
			<Button variant="destructive" disabled={deleteSaving} onclick={confirmDelete}>
				{deleteSaving ? 'Deleting…' : 'Delete'}
			</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>

<Dialog.Root bind:open={openCreateReport}>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Add report</Dialog.Title>
			<Dialog.Description>Add a new report for this employee.</Dialog.Description>
		</Dialog.Header>
		<form
			onsubmit={(e) => {
				e.preventDefault();
				submitCreateReport();
			}}
			class="grid gap-4 py-4"
		>
			<div class="space-y-2">
				<Label for="new-report">Report</Label>
				<textarea
					id="new-report"
					class="border-input bg-background ring-offset-background placeholder:text-muted-foreground flex min-h-[120px] w-full rounded-md border px-3 py-2 text-sm shadow-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
					placeholder="Enter report content…"
					bind:value={reportFormText}
					disabled={reportSaving}
					rows="5"
				/>
			</div>
			<div class="space-y-2">
				<div class="flex items-center justify-between">
					<Label>Voxer links</Label>
					<Button type="button" variant="outline" size="sm" onclick={addVoxer} disabled={reportSaving}>
						<PlusIcon class="size-4" />
						Add link
					</Button>
				</div>
				{#each reportVoxers as vox, i}
					<div class="flex gap-2">
						<Input
							placeholder="Label (e.g. Vox 1)"
							value={vox.label}
							oninput={(e) => {
								reportVoxers = reportVoxers.map((v, idx) =>
									idx === i ? { ...v, label: (e.currentTarget as HTMLInputElement).value } : v
								);
							}}
							class="flex-1"
						/>
						<Input
							placeholder="https://…"
							value={vox.url}
							oninput={(e) => {
								reportVoxers = reportVoxers.map((v, idx) =>
									idx === i ? { ...v, url: (e.currentTarget as HTMLInputElement).value } : v
								);
							}}
							class="flex-[2]"
						/>
						<Button type="button" variant="ghost" size="icon" onclick={() => removeVoxer(i)} aria-label="Remove link">
							<Trash2Icon class="size-4" />
						</Button>
					</div>
				{/each}
			</div>
			{#if reportError}
				<p class="text-destructive text-sm">{reportError}</p>
			{/if}
			<Dialog.Footer>
				<Dialog.Close asChild>
					<Button type="button" variant="outline">Cancel</Button>
				</Dialog.Close>
				<Button type="submit" disabled={reportSaving}>
					{reportSaving ? 'Saving…' : 'Add report'}
				</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>

<Dialog.Root bind:open={openEditReport}>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Edit report</Dialog.Title>
			<Dialog.Description>Update this report.</Dialog.Description>
		</Dialog.Header>
		<form
			onsubmit={(e) => {
				e.preventDefault();
				submitEditReport();
			}}
			class="grid gap-4 py-4"
		>
			<div class="space-y-2">
				<Label for="edit-report">Report</Label>
				<textarea
					id="edit-report"
					class="border-input bg-background ring-offset-background placeholder:text-muted-foreground flex min-h-[120px] w-full rounded-md border px-3 py-2 text-sm shadow-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
					placeholder="Enter report content…"
					bind:value={reportFormText}
					disabled={reportSaving}
					rows="5"
				/>
			</div>
			<div class="space-y-2">
				<div class="flex items-center justify-between">
					<Label>Voxer links</Label>
					<Button type="button" variant="outline" size="sm" onclick={addVoxer} disabled={reportSaving}>
						<PlusIcon class="size-4" />
						Add link
					</Button>
				</div>
				{#each reportVoxers as vox, i}
					<div class="flex gap-2">
						<Input
							placeholder="Label (e.g. Vox 1)"
							value={vox.label}
							oninput={(e) => {
								reportVoxers = reportVoxers.map((v, idx) =>
									idx === i ? { ...v, label: (e.currentTarget as HTMLInputElement).value } : v
								);
							}}
							class="flex-1"
						/>
						<Input
							placeholder="https://…"
							value={vox.url}
							oninput={(e) => {
								reportVoxers = reportVoxers.map((v, idx) =>
									idx === i ? { ...v, url: (e.currentTarget as HTMLInputElement).value } : v
								);
							}}
							class="flex-[2]"
						/>
						<Button type="button" variant="ghost" size="icon" onclick={() => removeVoxer(i)} aria-label="Remove link">
							<Trash2Icon class="size-4" />
						</Button>
					</div>
				{/each}
			</div>
			{#if reportError}
				<p class="text-destructive text-sm">{reportError}</p>
			{/if}
			<Dialog.Footer>
				<Dialog.Close asChild>
					<Button type="button" variant="outline">Cancel</Button>
				</Dialog.Close>
				<Button type="submit" disabled={reportSaving}>
					{reportSaving ? 'Saving…' : 'Save'}
				</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>

<Dialog.Root bind:open={openDeleteReport}>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Delete report</Dialog.Title>
			<Dialog.Description>
				Are you sure you want to delete this report? This cannot be undone.
			</Dialog.Description>
		</Dialog.Header>
		{#if reportDeleteError}
			<p class="text-destructive text-sm">{reportDeleteError}</p>
		{/if}
		<Dialog.Footer>
			<Dialog.Close asChild>
				<Button type="button" variant="outline">Cancel</Button>
			</Dialog.Close>
			<Button variant="destructive" disabled={reportDeleteSaving} onclick={confirmDeleteReport}>
				{reportDeleteSaving ? 'Deleting…' : 'Delete'}
			</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>