<script lang="ts">
	import type { Model } from './+page.svelte';
	import { rdelete, showMessage } from '$lib/requests.svelte';
	import { goto } from '$app/navigation';
	import { notificationStore } from 'src/lib/NotificationsStore.svelte';

	let { model }: { model: Model } = $props();
	let name: string = $state('');
	let submmited: boolean = $state(false);

	async function deleteModel() {
		submmited = true;

		try {
			await rdelete('models/delete', { id: model.id, name });
			goto('/models');
		} catch (e) {
			showMessage(e, notificationStore, 'Could not delete the model');
		}
	}
</script>

<form onsubmit={deleteModel} class:submmited class="danger-bg">
	<fieldset>
		<label for="name">
			To delete this model please type "{model.name}":
		</label>
		<input name="name" id="name" required bind:value={name} />
	</fieldset>
	<button class="danger"> Delete </button>
</form>
