<script lang="ts">
    import Card from '$lib/components/Cards/Card.svelte';
    import { Toast, ToastType } from "$lib/toast";
    import { addToast } from "$lib/stores";

    import { page } from '$app/stores';
    const sent = $page.url.searchParams.get('sent');

    if (sent == "true") {
        addToast(new Toast("Thank you! Your E-Mail has been sent. I will reply as soon as possible!", ToastType.Success, true, 5000));
    }
    // Can't use else otherwise the warning will display on load
    if (sent == "false") {
        addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
    }
</script>

<style>
    form {
        display: flex;
        flex-wrap: wrap;
        flex: 2 1;
        align-items: center;
        margin: 1em;
        gap: 1em 3em;
    }
    
    input, textarea {
        padding: 1em 0em 1em 1em;
        background-color: var(--input);
        color: var(--fg);
        border: 1px solid var(--fg); 
        outline: 0;
        border-radius: 8px;
        resize: none;
        min-width: 100%;
        transition: all 0.15s;
        font-size: .8em;
    }

    textarea {
        min-height: 12em;
    }

    .container {
        display: flex;
        flex: 2 1 5rem;
        flex-direction: column;
        gap: 1em 1em;
        width: 100%;
    }
</style>

<Card>
    <div slot="header">
        <h2>Contact</h2>
    </div>
    <div slot="content">
        <form action="https://api.staticforms.xyz/submit" method="post">
            <div class="container">
                <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
                <input type="text" name="name" placeholder="Name" required>
                <input type="text" name="email" placeholder="Email address" required>
                <input type="hidden" name="replyTo" value="@">
                <input type="text" name="subject" placeholder="Subject" required>
                <input type="text" name="honeypot" style="display: none;"> 
            </div>
            <div class="container">
                <textarea name="message" id="message" placeholder="Message" required></textarea>
            </div>
            <input class="button" type="submit" value="Send" />
            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
        </form>
    </div>
    <div slot="footer">
        <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
        <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
    </div>
</Card>