<script>
    import OverlayIsland from "$lib/islands/overlay-island.svelte";

    const variables = {
        title: "Welcome to OwlBoard"
    }
    const version = "2023.7.1"
    let pageNum = 0;

    function pageUp() {
        pageNum ++;
        console.log(`Welcome page: ${pageNum}`)
    }

    function pageDn() {
        pageNum --;
        console.log(`Welcome page: ${pageNum}`)
    }

    const pageText = [
        "<h3>A brand new look</h3>" +
          "<p>OwlBoard has a brand new look, making it even faster for you to access the data</p>" +
          "<p>If you have signed up before, you won't have to to it again and any customised Quick Links are here waiting for you</p>",
        "<h3>Faster Access</h3>" +
          "<p>Both live station data, and timetable search is available from the homepage.  Making it faster to get the info you need</p>" +
          "<p>Search the timetable using a headcode to see a trains details - OwlBoard now shows data for all TOCs and FOCs.</p>" +
          "<p>For GWR services: if a PIS code is available for a service, you'll see it alongside the train details.</p>",
        "<h3>PIS Finder</h3>" +
          "<p>Don't worry, the PIS finder hasn't gone away.  It has even been moved to the new navigation bar for faster access</p>" +
          "<p>If there isn't a PIS code available for a given headcode, you can use this tool to search by start and end stations, enabling you to utilise a different code and skipping stops as needed.</p>",
        "<h3>Everything Else</h3>" +
          "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
    ]
</script>

<OverlayIsland {variables}>
  <h2>What's new in OwlBoard {version}</h2>
    <div>
        {@html pageText[pageNum]}
    </div>
    <button type="button" on:click={pageDn}>&lt;</button>
    <button type="button" on:click={pageUp}>&gt;</button>
</OverlayIsland>

<style>
    div {
        color: white;
    }
</style>