<script lang="ts">
	import PipelineList from "$lib/components/repo/pipelines/PipelineList.svelte";
	import PipelineToolbar from "$lib/components/repo/pipelines/PipelineToolbar.svelte";
	import TabPanel from "$lib/components/ui/TabPanel.svelte";

	let { data } = $props();
</script>

<TabPanel padded={false} class="p-4">
	<PipelineToolbar
		ownerHandle={data.repo.ownerHandle}
		repoName={data.repo.name}
		filter={data.filter}
		total={data.pipelines.length}
	/>
</TabPanel>

<div class="mt-2">
	<PipelineList
		ownerHandle={data.repo.ownerHandle}
		repoName={data.repo.name}
		pipelines={data.pipelines}
		filtered={data.hasAny}
	/>
</div>
