<script lang="ts">
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import { featureDetect } from "$lib/scripts/featureDetect";
    import { onMount } from "svelte";
    import toast from "svelte-french-toast";
    import type { LookupCardConfig } from "$lib/cards/Card.types";
    import LookupCard from "$lib/cards/LookupCard.svelte";
    import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
    import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
    import FindByHeadcodeCard from "$lib/cards/FindByHeadcodeCard.svelte";
    const title = "OwlBoard";
    const lookupCards: LookupCardConfig[] = [
        {
            title: "Live Arr/Dep Boards",
            helpText: "",
            formAction: "/ldb",
            placeholder: "enter crs/tiploc",
            maxLen: 7,
            fieldName: "station",
        }
    ];

    onMount(async () => {
        const featureSupport = featureDetect();
        if (!featureSupport.critical) {
            toast.error("Use a newer browser or OwlBoard might not work properly.  See `Menu > Statistics` for more information.");
        } else if (!featureSupport.nice) {
            toast.error("Use a newer browser for the best experience, see `Menu > Statistics` for more information.");
        }
    });
</script>

<Header {title} />
{#each lookupCards as config}
    <LookupCard {config} />
{/each}
<FindByHeadcodeCard />
<NearToMeCard />
<QuickLinkCard />

<Nav />
