<script>
    import Banner from "$lib/Banner.svelte";

    let username = "";
    let password = "";

    const submitHandler = () => {
        alert("TODO: implement login backend");
    };
</script>

<svelte:head>
    <title>Quartznet - Login</title>
</svelte:head>

<Banner title="Login" />

<main class="container">
    <form
        on:submit|preventDefault={submitHandler}
        class="form-signin"
        method="post"
    >
        <div class="form-label-group">
            <label for="username">Username</label>
            <input
                type="text"
                id="username"
                class="form-control"
                bind:value={username}
                name="username"
                placeholder="Username"
                required
            />
        </div>

        <div class="form-label-group">
            <label for="inputPassword">Password</label>
            <input
                type="password"
                id="password"
                class="form-control"
                bind:value={password}
                name="password"
                placeholder="Password"
                required
            />
        </div>

        <div class="custom-control custom-checkbox mb-3">
            <input
                type="checkbox"
                class="custom-control-input"
                id="customCheck1"
            />
            <label class="custom-control-label" for="customCheck1"
                >Remember password</label
            >
        </div>
        <button class="btn btn-primary" type="submit">Sign in</button>
    </form>
</main>
