<script lang="ts">
	import JobRow from './JobRow.svelte';

	interface Props {
		jobs: any[];
	}

	let { jobs }: Props = $props();

	let expandedJobId: string | null = $state(null);

	const COLUMN_COUNT = 6;

	function toggleRow(jobId: string) {
		expandedJobId = expandedJobId === jobId ? null : jobId;
	}
</script>

<div class="overflow-x-auto rounded-md border">
	<table class="w-full text-left">
		<thead>
			<tr class="border-b bg-muted/50">
				<th class="w-10 px-3 py-3"></th>
				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Name</th>
				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Type</th>
				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Status</th>
				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Created</th>
				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Sub-jobs</th>
			</tr>
		</thead>
		<tbody>
			{#each jobs as job (job.id)}
				<JobRow
					{job}
					expanded={expandedJobId === job.id}
					onToggle={() => toggleRow(job.id)}
					columnCount={COLUMN_COUNT}
				/>
			{/each}
		</tbody>
	</table>
</div>
