{employee?.First_Name} {employee?.Last_Name} {#if employee?.Type} {employee.Type} {/if}

{#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}

Type {#if editMode} { employee = { ...employee!, Type: v ?? undefined }; if (v !== undefined) patchField('Type', v ?? ''); }} disabled={patchSaving} > {employee.Type || 'Select type…'} (none) {#each ['Employee', 'Sub-Contractor', 'Former-Employee', 'Applicant', 'Blacklisted'] as opt} {opt} {/each} {:else}

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

{/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}

Scopes {#if editMode}

{#each SCOPE_OPTIONS as scope} toggleScope(scope)} disabled={patchSaving} /> {scope} {/each}

{:else}

{#if employeeScopes().length > 0}

{#each employeeScopes() as scope} {scope} {/each}

{:else} — {/if}

{/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)}
										{#if report.Sentiment}
											· <span class="capitalize">{report.Sentiment}</span>
										{/if}
									</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="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-end">
				<div class="space-y-2">
					<Label for="new-created">Created (local time)</Label>
					<Input
						id="new-created"
						type="datetime-local"
						bind:value={reportCreatedLocal}
						disabled={reportSaving}
					/>
				</div>
				<div class="space-y-2">
					<Label for="new-sentiment">Sentiment</Label>
					<Select.Root bind:value={reportSentiment} disabled={reportSaving}>
						<Select.Trigger class="w-full" id="new-sentiment">
							{reportSentiment}
						</Select.Trigger>
						<Select.Content>
							{#each SENTIMENT_OPTIONS as opt}
								<Select.Item value={opt} label={opt}>{opt}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
			</div>
			<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="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-end">
				<div class="space-y-2">
					<Label for="edit-created">Created (local time)</Label>
					<Input
						id="edit-created"
						type="datetime-local"
						bind:value={reportCreatedLocal}
						disabled={reportSaving}
					/>
				</div>
				<div class="space-y-2">
					<Label for="edit-sentiment">Sentiment</Label>
					<Select.Root bind:value={reportSentiment} disabled={reportSaving}>
						<Select.Trigger class="w-full" id="edit-sentiment">
							{reportSentiment}
						</Select.Trigger>
						<Select.Content>
							{#each SENTIMENT_OPTIONS as opt}
								<Select.Item value={opt} label={opt}>{opt}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
			</div>
			<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>