<script lang="ts">
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import PipelineCard from "./PipelineCard.svelte";
	import PipelineEmptyState from "./PipelineEmptyState.svelte";
	import type { PipelineSummary } from "$lib/components/repo/types";

	interface Props {
		ownerHandle: string;
		repoName: string;
		pipelines: PipelineSummary[];
		/** repo has runs, they just do not match — show "no match" instead of the setup steps */
		filtered?: boolean;
	}

	let { ownerHandle, repoName, pipelines, filtered = false }: Props = $props();
</script>

{#if pipelines.length > 0}
	<div class="flex flex-col gap-2">
		{#each pipelines as pipeline (pipeline.id)}
			<PipelineCard {ownerHandle} {repoName} {pipeline} />
		{/each}
	</div>
{:else if filtered}
	<EmptyState message="No pipelines match your search." />
{:else}
	<PipelineEmptyState {ownerHandle} {repoName} />
{/if}
