<template>

    <form class="contact-form">
        <div class="contact-form__name">
            <label for="name">Nom</label>
            <input type="text" id="name" name="name" required />
        </div>
        <div class="contact-form__email">
            <label for="email">Adresse e-mail</label>
            <input type="email" id="email" name="email" required />
        </div>
        <div class="contact-form__subject">
            <label for="subject">Sujet</label>
            <input type="text" id="subject" name="subject" required />
        </div>
        <div class="contact-form__message">
            <label for="message">Message</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        <button class="contact-form__button" @click.prevent="sendEmail()">
            <span class="contact-form__button-text">Envoyer</span>
            <svg class="contact-form__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                <line x1="23" y1="1" x2="10.9" y2="13.1"/>
                <polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
            </svg>
        </button>
    </form>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    // const contactName = ref('');
    // const contactEmailAddress = ref('');
    // const contactSubject = ref('');
    // const contactMessage = ref('');

    const contactName = 'Saint Victeur';
    const contactEmailAddress = 'saint.victeur@email.com';
    const contactSubject = 'Test - API Mailjet';
    const contactMessage = `Saint Victeur vous bénit !`;

    // --------------------------------------------------
    // LOGIC
    // --------------------------------------------------

    const sendEmail = async () => {
        try {
            $fetch('/api/mailjet', {
                method: 'post',
                body: {
                    name: contactName,
                    emailAddress: contactEmailAddress,
                    subject: contactSubject,
                    message: contactMessage
                }
            });
            console.log('Success!');
        } catch(err) {
            console.log('Failure!');
        }
    }

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // LAYOUT & STYLE
    // --------------------------------------------------

    .contact-form {
        width: var(--text-width);
        display: grid;
        grid:
            'name name' auto
            'email email' auto
            'subject subject' auto
            'message message' auto
            'button .' auto
            / 1fr 1fr;
        place-content: start;
        place-items: start;
        gap: 2rem;

        &__name {
            grid-area: name;
        }

        &__email {
            grid-area: email;
        }

        &__subject {
            grid-area: subject;
        }

        &__message {
            grid-area: message;
        }

        &__name,
        &__email,
        &__subject,
        &__message {
            position: relative;
            width: 100%;
        }

        &__button {
            grid-area: button;
            @include button-with-icon;
        }
        
        @media screen and (min-width: $tablet-media-query) {

            grid:
                'name .' auto
                'email .' auto
                'subject subject' auto
                'message message' auto
                'button .' auto
                / 1fr 1fr;
        }
    }


</style>
