<script>
    import { site } from 'utils/store'
    // Components
    import IconArrow from 'atoms/IconArrow'

    // Props
    export let title = true
    export let small = false
    export let brightness = 'dark'
</script>

<div class="newsletter" class:newsletter--small={small} class:newsletter--light={brightness === 'light'}>
    <div class="newsletter__text style-description" class:style-description--small={small} class:style-description--dark={brightness === 'light'} class:page__part={!small}>
        <p>{$site.newsletter_text}</p>
    </div>

    <form method="POST" action={$site.newsletter_url} target="_blank" id="sib-form" class="form"
        class:form--light={brightness === 'light'}
        class:page__part={!small}
    >
        {#if title}
        <h2 class="style-location">
            <label for="EMAIL">{$site.newsletter_subtitle}</label>
        </h2>
        {/if}

        <div class="newsletter__input form__group form__inputgroup">
            <input type="email" id="EMAIL" name="EMAIL" value="" placeholder="Your email address..." class="input__text" required>
            <button type="submit" form="sib-form" class="button-control dir-right"
                class:button-control--pink={brightness === 'light'}
                class:button-control--lightpink={brightness === 'dark'}
            >
                <IconArrow direction="right" color="#fff" class="icon" width="12" />
                <IconArrow direction="right" color="#fff" class="icon" width="12" hidden="true" />
            </button>
        </div>

        <div class="newsletter__notice">
            <p class="style-notice">No spam, promised!</p>
        </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>