<script>
import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte'
const title = "Home"
</script>
<svelte:head>
    <title>OwlBoard - {title}</title>
</svelte:head>


<Header {title} />
<div class="form-box">
    <form action="/ldb">
        <span class="input-title">Live Departure Boards</span>
        <br>
        <input class="form-input" type="text" id="input-station" name="station" placeholder="Enter CRS/TIPLOC">
        <br>
        <button class="form-button" type="submit">Submit</button>
    </form>
</div>
<div class="form-box">
    <form action="/result-timetable">
        <span class="input-title">Train Details & PIS</span>
        <br>
        <input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
        <br>
        <button class="form-button" type="submit">Submit</button>
    </form>
</div>
<div class="form-box">
    <span class="input-title">Quick Links</span>
    <div class="quick-links">
    </div>
</div>
<Nav />

<style>
    .input-title {
        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    .form-box {
        width: 75%;
        max-width: 400px;
        margin: auto;
        margin-top: 25px;
        padding: 10px;
        background-color: var(--overlay-color);
        border-radius: 10px;
    }
    .form-input {
        width: 75%;
        height: 30px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 50px;
        border: none;
        text-align: center;
        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    .form-button {
        width: 50%;
        margin-bottom: 5px;
        margin-top: 5px;
        border: none;
        border-radius: 20px;
        padding: 5px;
        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 16px;
        font-weight: 400;
        background-color: var(--main-bg-color);
        color: var(--link-color);
    }
    .quick-links {
        display: flex;
    }
</style>