<script lang="ts">
	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 Pause from "$icon/pause";
	import X from "$icon/x";

	let password = $state("");
	const valid = $derived(password.length > 0);
</script>

<DrillDown
	backLabel="Profile"
	backHref="/settings"
	title="Deactivate account"
	description="Your profile and repositories will become inaccessible. You can reactivate by logging in again."
>
	<SettingsList padding="tight">
		<FormRow
			label="Password"
			description="Confirm your identity to proceed."
			for="deactivate-password"
		>
			<Input id="deactivate-password" type="password" bind:value={password} />
		</FormRow>
	</SettingsList>

	<FormActions>
		<Button href="/settings" icon={X}>Cancel</Button>
		<!-- mocked — account lifecycle is backed by G4 -->
		<Button variant="warning" icon={Pause} disabled={!valid}>Deactivate</Button>
	</FormActions>
</DrillDown>
