<style lang="scss">
    @import "../../style/molecules/newsletter-form";
</style>

<script lang="ts">
    import { getContext } from 'svelte'
    // Components
    import IconArrow from '$components/atoms/IconArrow.svelte'
    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'

    export let past: boolean = false

    const { settings: { newsletter_url }}: any = getContext('global')

    let inputInFocus = false

    // Toggle input focus
    const toggleFocus = () => inputInFocus = !inputInFocus
</script>

<div class="newsletter-form">
    <form method="POST" action={newsletter_url} id="sib-form" target="_blank">
        <div class="newsletter-form__email" class:is-focused={inputInFocus}>
            <input type="email" placeholder="Your email address" name="EMAIL" id="SUB_EMAIL" required
                on:focus={toggleFocus}
                on:blur={toggleFocus}
            >
            <ButtonCircle
                type="submit" form="sib-form"
                color="pink" size="small"
                clone={true}
                label="Subscribe"
            >
                <IconArrow color="white" />
            </ButtonCircle>
        </div>

        <input type="text" name="email_address_check" value="" style="display: none;">
        <input type="hidden" name="locale" value="en">
        <input type="hidden" name="html_type" value="simple">
    </form>

    <div class="newsletter-form__bottom">
        {#if past}
            <a href="/subscribe" class="past-issues" sveltekit:noscroll sveltekit:prefetch>
                <svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
                </svg>
                <span>See past issues</span>
            </a>
        {/if}
        <p>No spam, we promise!</p>
    </div>
</div>
