<script lang="ts">
	import { goto } from "$app/navigation";
	import { resolve } from "$app/paths";
	import Button from "$lib/components/ui/Button.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import DrillDown from "$lib/components/settings/DrillDown.svelte";
	import SettingsList from "$lib/components/settings/SettingsList.svelte";
	import FormRow from "$lib/components/settings/FormRow.svelte";
	import FormActions from "$lib/components/settings/FormActions.svelte";
	import Plus from "$icon/plus";
	import X from "$icon/x";

	let { data } = $props();

	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/pipelines`);

	let name = $state("");
	let value = $state("");
	const valid = $derived(name.trim().length > 0 && value.length > 0);

	// mocked — secrets are not wired up yet
	const submit = () => goto(resolve(back as "/"));
</script>

<DrillDown
	backLabel="Pipelines"
	backHref={back}
	title="Add secret"
	description="Secrets are available as environment variables in the workflow."
>
	<SettingsList padding="tight">
		<FormRow label="Name" for="secret-name">
			<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
		</FormRow>
		<FormRow label="Value" for="secret-value">
			<Input id="secret-value" bind:value placeholder="very important secret" />
		</FormRow>
	</SettingsList>

	<FormActions>
		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
	</FormActions>
</DrillDown>
