<script>
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import InputIsland from "$lib/islands/input-island-form.svelte";
    import QuickLinkIsland from "$lib/islands/quick-link-island.svelte";
    import Welcome from "$lib/overlays/welcome.svelte";
    import { welcome } from "$lib/stores/welcome";
    import { version, showWelcome } from "$lib/stores/version";

    const title = "OwlBoard";
    const inputIslands = [
        {
            title: "Live Departure Boards",
            action: "/ldb",
            placeholder: "Enter CRS/TIPLOC",
            queryName: "station"
        },
        {
            title: "Train Details & PIS",
            action: "/train",
            placeholder: "Enter Headcode",
            queryName: "headcode"
        }
    ];
</script>

{#if showWelcome && ($welcome === "null" || !$welcome || parseInt($welcome.replace(/\./g, "")) < parseInt(version.replace(/\./g, "")))}
    <Welcome />
{/if}
<Header {title} />

{#each inputIslands as variables}
    <InputIsland {variables} />
{/each}

<QuickLinkIsland />

<Nav />
