<script module lang="ts">
	import { tv } from "tailwind-variants";

	export const pipelineEmptyState = tv({
		slots: {
			root: "flex flex-col items-center gap-6 rounded-sm border border-border-default bg-background-default px-6 py-12 text-center",
			icon: "size-16 text-foreground-disabled",
			intro: "flex flex-col gap-2",
			heading: "typography-paragraph-large font-semibold text-foreground-default",
			body: "max-w-md typography-paragraph-small text-foreground-muted",
			steps: "flex max-w-md flex-col gap-3 text-left",
			step: "flex items-start gap-3",
			badge:
				"flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-semibold text-foreground-default",
			stepBody: "typography-paragraph-small text-foreground-muted",
			link: "text-foreground-default underline hover:no-underline"
		}
	});
</script>

<script lang="ts">
	import { resolve } from "$app/paths";
	import Layers2 from "$icon/layers-2";
	import type { Snippet } from "svelte";

	interface Props {
		ownerHandle: string;
		repoName: string;
	}

	let { ownerHandle, repoName }: Props = $props();

	const settingsHref = $derived(resolve(`/${ownerHandle}/${repoName}/settings/pipelines` as "/"));
	const classes = pipelineEmptyState();
</script>

{#snippet step(index: number, body: Snippet)}
	<li class={classes.step()}>
		<span class={classes.badge()}>{index}</span>
		<span class={classes.stepBody()}>{@render body()}</span>
	</li>
{/snippet}

<!-- an empty tab almost always means CI was never set up, so show the setup steps -->
<div class={classes.root()}>
	<Layers2 class={classes.icon()} aria-hidden="true" />

	<div class={classes.intro()}>
		<p class={classes.heading()}>No pipelines have been run yet</p>
		<p class={classes.body()}>Get started by configuring CI/CD for this repository.</p>
	</div>

	<ol class={classes.steps()}>
		{@render step(1, spindle)}
		{@render step(2, configure)}
		{@render step(3, trigger)}
	</ol>
</div>

{#snippet spindle()}
	Choose a spindle in your <a href={settingsHref} class={classes.link()}>repository settings</a>
{/snippet}

{#snippet configure()}
	<!-- plain anchor: Button's href only takes internal paths -->
	Configure your CI/CD
	<a
		href="https://docs.tangled.org/spindles.html#pipelines"
		target="_blank"
		rel="noopener"
		class={classes.link()}>pipeline</a
	>
{/snippet}

{#snippet trigger()}
	Trigger a workflow with a push or pull request
{/snippet}
