<script lang="ts">
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Textbox from '$lib/components/ui/Textbox.svelte';
import Button from '$lib/components/ui/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'}>
	<div class="card-content">
        <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 onclick={() => onsearch(startValue, endValue)}>Search</Button>
            <Button onclick={resetValues}>Reset</Button>
        </div>
	</div>
</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: 4rem;
    }

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

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