Add train details to train endpoint. Formatting and styling incomplete

src/routes/trains/+page.svelte

@@ -1,34 +1,29 @@
 <script lang="ts">
-    import NoResults from '$lib/components/ui/NoResults.svelte';
+	import NoResults from '$lib/components/ui/NoResults.svelte';
 	import TrainService from '$lib/components/ui/TrainService.svelte';
-    let { data } = $props();
-
+	let { data } = $props();
 </script>
 
-
-
 {#if data.results.length === 0}
-    <NoResults 
-        message={"No trains found on this date with this headcode."}
-    />
+	<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>
+	<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;
-    }
+	.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>