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

<script>
    import { login } from '$lib/api';
    import { isValidEmail } from '$lib/utils';
    import Modal from '$components/Modal.svelte';
    import Header from '$components/Header.svelte';
    import Footer from '$components/Footer.svelte';
    import { navigate } from 'svelte-navigator';

    let showModal = false;
    let modalMessage = 'Test message';

    let email = '';
    let password = '';

    async function handleLogin() {
        return;
        if (!isValidEmail(email)){
            modalMessage = "Please enter the email address you used to sign up.";
            showModal = true;
            return;
        }
        try {
            const user = await login(email, password);
            navigate('/profile');
            //reload the page
            location.reload();
        } catch (err) {
            modalMessage = err;
            showModal = true;
        }
    }

    function closeModal() {
        showModal = false;
    }

    let showUserNav = false;
</script>

<Header {showUserNav} />

<main>

<form class="colonel" on:submit={handleLogin}>
    <input type="email" placeholder="Email" bind:value={email} required>
    <input type="password" placeholder="P@s5word" bind:value={password} required>

    <button type="submit" class="btn-fly">Log in</button>
</form>

<form class="colonel" method="POST">
    <input type="email" name="email" placeholder="Email" bind:value={email} required>
    <input type="password" name="password" placeholder="P@s5word" bind:value={password} required>

    <button type="submit" class="btn-fly">Log in</button>
</form>

{#if showModal}
    <Modal on:close={closeModal}>
        <p>{modalMessage}</p>
    </Modal>
{/if}

</main>
<Footer />