<script lang="ts">
	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
	import Button from '$lib/components/ui/form-elements/Button.svelte';

	let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();

	let startValue = $state('');
	let endValue = $state('');

	function resetValues(): void {
		startValue = '';
		endValue = '';
	}
</script>

<BaseCard header={'Find by Start/End CRS'}>
	<form
		class="card-content"
		onsubmit={(e) => {
			e.preventDefault();
			onsearch(startValue, endValue);
		}}
	>
		<div class="textbox-container">
			<div class="textbox-item-wrapper">
				<Textbox placeholder={'Start'} uppercase={true} maxLength={3} bind:value={startValue} />
			</div>
			<div class="textbox-item-wrapper">
				<Textbox placeholder={'End'} uppercase={true} maxLength={3} bind:value={endValue} />
			</div>
		</div>
		<div class="button-wrapper">
			<Button type={'submit'}>Search</Button>
			<Button onclick={resetValues}>Reset</Button>
		</div>
	</form>
</BaseCard>

<style>
	.card-content {
		text-align: center;
		width: 90%;
		margin: auto;
		padding: 10px 0 10px 0;
	}

	.textbox-container {
		display: flex;
		width: 100%;
		justify-content: center;
		gap: 1.1rem;
	}

	.textbox-item-wrapper {
		width: 50%;
	}

	.button-wrapper {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 15px;
	}
</style>
