<div id="newsletter" class="newsletter">

    <h3 class="title__h3 -tilted">
        <span>$translations[$locale].newsletterTitle</span></h3>
    <p class="sv-font-normal-white">$translations[$locale].newsletterBody</p>
    <p class="sv-font-button">
        <a href="#" id="newsletter-button" class="-deactivated">$translations[$locale].newsletter</a>
        <a href="#" id="magazine-button" class="-deactivated">$translations[$locale].customermagazine</a>
    </p>

    <form
        action="${baseUrl}/other/ActiveCampaign.Newsletter.json"
        class="js-newsletter-form"
        autocomplete="off"
        data-success="$translations[$locale].newsletterSuccess"
        data-error="$translations[$locale].newsletterError">

        <div>
            <input type="text" name="first_name" placeholder="$translations[$locale].newsletterFirstName">
            <input type="text" name="last_name" placeholder="$translations[$locale].newsletterLastName">
        </div>
        <div
            class="dropdown dropdown--state -fullWidth -inactive"
            data-expander=""
            data-expander-always="true">
            <ul class="dropdown__container">
                <li class="-activated">
                    <span>$statePlaceholder</span></li>
                #foreach ($state in $states)
                    <li data-value="$state.abbreviation" data-country="$state.country">$state.name</li>
                #end
            </ul>
            <span class="arrow">
                <i class="fa fa-chevron-down"></i>
            </span>
            <ul class="foldout"></ul>
        </div>
        <div class="dropdown dropdown--country -fullWidth" data-expander="" data-expander-always="true">
            <ul class="dropdown__container">
                <li class="#if(!$iso)-activated#end">
                    <span>$countryPlaceholder</span></li>
                #foreach ($country in $countries)
                    <li class="#if($country.value == $iso)-activated#end" data-value="$country.value">$country.name</li>
                #end
            </ul>
            <span class="arrow">
                <i class="fa fa-chevron-down"></i>
            </span>
            <ul class="foldout"></ul>
        </div>
        <input type="email" name="email" placeholder="$translations[$locale].newsletterEmail" class="full">
        <label><input type="checkbox" name="consent-gdpr">
            <a href="$policyLink" target="_blank" class="consent">$translations[$locale].gdprConsent</a>
        </label>
        <label><input type="checkbox" name="consent-newsletter">$translations[$locale].newsletterConsent</label>
        <input type="hidden" name="language" value="$language">
        <input
            type="hidden"
            name="newsstate"
            id="newsstate"
            placeholder="#if($statePlaceholder)$statePlaceholder#end"
            value="">
        <input
            type="hidden"
            name="newscountry"
            id="newscountry"
            placeholder="#if($countryPlaceholder)$countryPlaceholder#end"
            value="#if($iso)$iso#end">
        <button type="submit">
            <i class="fa fa-paper-plane"></i>
            <span>$translations[$locale].newsletterButton</span></button>

        <div
            class="g-recaptcha"
            data-sitekey="6Lcz0UcUAAAAACA-7eaYRqAUl50O3Ywuf4BiSLjS"
            data-size="invisible"></div>

    </form>

    <p class="js-newsletter-form-response"></p>

    <div class="form-module">
        <form
            action="/other/ActiveCampaign.SubscriptionForm.json"
            class="subscription-form"
            data-success="$translations[$locale].magazineSuccess"
            data-error="$translations[$locale].magazineError">
            <div>
                <input type="text" name="first_name" placeholder="$firstname">
                <input type="text" name="last_name" placeholder="$lastname">
            </div>
            <div>
                <input type="text" name="company" placeholder="$company">
                <input type="tel" name="phone" placeholder="$phone">
            </div>
            <input type="text" name="address" placeholder="$address" class="full">
            <div>
                <input type="text" name="zipcode" placeholder="$zipcode">
                <input type="text" name="city" placeholder="$city">
            </div>
            <div
                class="dropdown dropdown--state -fullWidth -inactive"
                data-expander=""
                data-expander-always="true">
                <ul class="dropdown__container">
                    <li class="-activated">
                        <span>$statePlaceholder</span></li>
                    #foreach ($state in $states)
                        <li data-value="$state.abbreviation" data-country="$state.country">$state.name</li>
                    #end
                </ul>
                <span class="arrow">
                    <i class="fa fa-chevron-down"></i>
                </span>
                <ul class="foldout"></ul>
            </div>
            <div class="dropdown dropdown--country -fullWidth" data-expander="" data-expander-always="true">
                <ul class="dropdown__container">
                    <li class="#if(!$iso)-activated#end">
                        <span>$countryPlaceholder</span></li>
                    #foreach ($country in $countries)
                        <li class="#if($country.value == $iso)-activated#end" data-value="$country.value">$country.name</li>
                    #end
                </ul>
                <span class="arrow">
                    <i class="fa fa-chevron-down"></i>
                </span>
                <ul class="foldout"></ul>
            </div>
            <input
                type="hidden"
                name="userstate"
                id="userstate"
                placeholder="#if($statePlaceholder)$statePlaceholder#end"
                value="">
            <input
                type="hidden"
                name="usercountry"
                id="usercountry"
                placeholder="#if($countryPlaceholder)$countryPlaceholder#end"
                value="#if($iso)$iso#end">
            <input type="email" name="email" placeholder="$email" class="full">
            <label><input type="checkbox" name="consent-gdpr">
                <a href="$policyLink" target="_blank" class="consent">$translations[$locale].gdprConsent</a>
            </label>
            <label><input type="checkbox" name="consent-customermagazine">$translations[$locale].customermagazineConsent</label>
            <button type="submit">
                <i class="fa fa-paper-plane"></i>
                <span>$send</span></button>

        </form>

    </div>

    <p class="subscription-form-response"></p>

</div>