<script lang="ts">
	import NoResults from '$lib/components/ui/NoResults.svelte';
	import TrainService from '$lib/components/ui/TrainService.svelte';
	let { data } = $props();
</script>

<h6 style="text-align:center;width=100%;margin:auto;padding-top:1rem;font-size:1rem;">
	DateSelector
</h6>
{#if data.results.length === 0}
	<NoResults message={'No trains found on this date with this headcode.'} />
{:else}
	<div class="result-boxes">
		{#each data.results as service (service.r)}
			<TrainService {service} />
		{/each}
	</div>
{/if}

<style>
	.result-boxes {
		width: 95%;
		margin: auto;
		padding-top: 1rem;
		padding-bottom: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 1rem;
	}
</style>
