<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 />