<script lang="ts">
	import Button from "$lib/components/ui/button/button.svelte";
	import { stores } from "$lib/services/stores.svelte";
	import { view } from "../view.svelte";

	const saved = stores<{ name: string }>("route");
</script>

{#if saved.current.length != 0}
	<div>
		<h2 style="margin: 5px; margin-left: 0; font-size: 1.2em;">Saved Routes</h2>

		<div style="display: flex; flex-direction: column; gap: 10px;">
			{#each saved.current as save, _index (save.name)}
				<Button
					variant="secondary"
					onclick={() => {
						view.switch("trip", { route: save.data });
					}}>{save.data.name}</Button
				>
			{/each}
		</div>
	</div>
{/if}
