<div class="newsletter-form" data-module="newsletterForm" data-api-endpoint="{{form.apiEndpoint}}"
    data-news-letter-signup="{{newsLetterSignup}}" data-preload="{{preload}}">
    {{#if title}}<h3 class="newsletter-form__title">{{title}}</h3>{{/if}}
    <p class="newsletter-form__subtitle">{{subtitle}}</p>
    <form class="newsletter-form__form js-newsletter-form" action="" method="GET" id="{{newsletterFormId}}">
        <div class="newsletter-form__group">
            {{#if form.salutations}}
            <label class="newsletter-form__label" for="{{newsletterFormId}}_title" aria-label="Title">{{form.salutationPlaceholderText}}</label>
            <div class="newsletter-form__input-group newsletter-form__input-group--select">
                <div class="newsletter-form__select">
                    <select id="{{newsletterFormId}}_title" name="title" class="js-newsletter-salutations-input">
                        <option value="">{{form.salutationPlaceholderText}}</option>
                        {{#each form.salutations}}
                            <option value="{{value}}">{{name}}</option>
                        {{/each}}
                    </select>
                </div>
                    {{#if form.salutationToolTip}}
                        {{> @cp-tooltip form.salutationToolTip}}
                    {{/if}}
            </div>
            {{/if}}
            <div class="newsletter-form__input-group">
                <label class="newsletter-form__label" aria-label="First name" for="{{newsletterFormId}}_first_name">{{form.firstNamePlaceholderText}}</label>
                <input class="newsletter-form__input js-newsletter-first-name-input" type="text" id="{{newsletterFormId}}_first_name" name="first_name"  autocomplete="off" placeholder="{{form.firstNamePlaceholderText}}" pattern="[A-Za-z0-9 ,.'-]+" title="Please avoid using special characters except for period and comma." required />
                {{#if form.firstNameToolTip}}
                        {{> @cp-tooltip form.firstNameToolTip}}
                {{/if}}
            </div>
            <div class="newsletter-form__input-group">
                <label class="newsletter-form__label" aria-label="Last name" for="{{newsletterFormId}}_last_name">{{form.surnamePlaceholderText}}</label>
                <input class="newsletter-form__input js-newsletter-surname-input" type="text" id="{{newsletterFormId}}_last_name" name="last_name"  autocomplete="off" placeholder="{{form.surnamePlaceholderText}}" pattern="[A-Za-z0-9 ,.'-]+" title="Please avoid using special characters except for period and comma." required />
                {{#if form.surnameToolTip}}
                        {{> @cp-tooltip form.surnameToolTip}}
                {{/if}}
            </div>
        </div>
        <div class="newsletter-form__group">
            <div class="newsletter-form__input-group">
                <label class="newsletter-form__label" aria-label="Email address" for="{{newsletterFormId}}_email">{{form.emailPlaceholderText}}</label>
                <input class="newsletter-form__input js-newsletter-email-input" type="text" id="{{newsletterFormId}}_email" name="email"  autocomplete="off" placeholder="{{form.emailPlaceholderText}}" pattern="[^<>]*" title="Please avoid using > or < symbols in details." required />
                {{#if form.emailToolTip}}
                        {{> @cp-tooltip form.emailToolTip}}
                {{/if}}
            </div>
        </div>
        <label class="newsletter-form__label" aria-label="Email address" for="{{newsletterFormId}}_email2">{{form.placeholderText}}</label>
        <input class="newsletter-form__inputemail2 js-newsletter-inputemail2" type="email" id="{{newsletterFormId}}_email2" name="email2"
        autocomplete="off" placeholder="{{form.placeholderText}}" />
        <p class="newsletter-form__message newsletter-form__message--error js-newsletter-error"><span class="newsletter-form__icon"></span>{{form.errorMessage}}</p>
        <p class="newsletter-form__message newsletter-form__message--error js-newsletter-api-error"><span class="newsletter-form__icon"></span>{{form.apiErrorMessage}}</p>
        <p class="newsletter-form__message newsletter-form__message--success js-newsletter-success"><span class="newsletter-form__icon"></span>{{form.successMessage}}</p>
        <div class="newsletter-form__group newsletter-form__checkboxes">
            {{#if disclaimerText }}
                <div class="newsletter-form__input-group newsletter-form__checkbox-group">
                    <input type="checkbox" id="{{newsletterFormId}}_agree" value="" class="newsletter-form__checkbox input-checkbox is-default js-newsletter-checkbox-input" required>
                    <label class="newsletter-form__disclaimer" for="{{newsletterFormId}}_agree">{{> @cp-text-richtext disclaimerText}}</label>
                </div>
            {{/if}}
            {{#if thirdPartySignUp }}
                <div class="newsletter-form__input-group newsletter-form__checkbox-group">
                    <input type="checkbox" id="{{newsletterFormId}}_third-party-sign-up" value="false" class="newsletter-form__checkbox input-checkbox is-default js-third-party-sign-up">
                    <label class="newsletter-form__disclaimer" for="{{newsletterFormId}}_third-party-sign-up">{{> @cp-text-richtext thirdPartySignUp}}</label>
                </div>
            {{/if}}
        </div>
        <button class="button-p1 button-p1--with-icon newsletter-form__button js-newsletter-submit" disabled id="{{newsletterFormId}}_button">{{form.button.text}}</button>
    </form>
</div>