{% set widgetId = currentWidget.getWidgetId() %}
<div data-widget-id="{{ widgetId }}" class="moto-widget moto-widget-mail_chimp moto-widget-contact_form moto-preset-{{ currentWidget.properties.preset }} {{ currentWidget.getSpacing('classes') }} {{ currentWidget.getVisibleOn('classes') }} {{ currentWidget.getAnimationClasses() }}" data-widget="mail_chimp" data-preset="{{ currentWidget.properties.preset }}">
    <div ng-controller="widget.MailChimp.Controller" ng-init="listId = '{{ currentWidget.properties.listId }}';{% if not isPreview %}actionAfterSubmission={{ currentWidget.getActionAfterSubmission() }};resetAfterSubmission={{currentWidget.properties.resetAfterSubmission | json_encode}};{% endif %}">

        {% if isPreview %}
            <div class="moto-widget-cover"></div>
        {% endif %}

        <form class="moto-widget-contact_form-form{% if currentWidget.properties.inline %} {{ currentWidget.getCssClassesForInline() }}{{ currentWidget.getJustifyCssClass() }}{% endif %}" role="form" name="subscribeForm" ng-submit="submit()" novalidate>
            <div ng-show="sending" class="contact-form-loading"></div>
            {% for name, field in currentWidget.properties.fields %}
                {% if field.enabled %}
                    {% if field.type == 'checkbox' %}
                        <div class="moto-widget-contact_form-group{% if currentWidget.properties.inline %} moto-spacing-left-{{ currentWidget.properties.spacingBetweenElements }}{% endif %}" ng-class="{'moto-widget-contact_form-group-not-valid': subscribeForm.checkbox.$invalid, 'moto-widget-contact_form-checkbox-checked': message.checkbox}">
                            <input id="moto-widget-contact_form-checkbox-{{ widgetId }}" name="checkbox" ng-model="message.checkbox" ng-change="checkboxChanged()" type="checkbox" class="moto-widget-contact_form-checkbox"{% if field.required %} ng-init="requiredCheckbox()"{% endif %}>
                            <label class="moto-widget-contact_form-checkbox-label moto-widget-contact_form-checkbox-label_type-{{ field.labelType|default('text') }}" for="moto-widget-contact_form-checkbox-{{ widgetId }}">
                                <span class="moto-widget-contact_form-checkbox-icon"></span>
                                <span class="moto-widget-contact_form-checkbox-text {% if (field.labelType|default('text')) == 'text' %}{{ field.text_style }}{% else %}moto-widget-text{% endif %}">{% filter page_html_content(item, 'widget:mail_chimp.checkboxLabel') %}{% include template_from_string(field.label) %}{% endfilter %}</span>
                            </label>
                        </div>
                    {% else %}
                        <div class="moto-widget-contact_form-group{% if currentWidget.properties.inline %} moto-spacing-left-{{ currentWidget.properties.spacingBetweenElements }}{% endif %}">
                            <label for="field_{{ name }}_{{ widgetId }}" class="moto-widget-contact_form-label">{{ field.placeholder }}</label>
                            <input type="text" class="moto-widget-contact_form-field moto-widget-contact_form-input" placeholder="{{ field.placeholder }} {% if field.required %}*{% endif %}" {% if field.required %} ng-blur="validate('{{ name }}')" required {% endif %} ng-model-options="{ updateOn: 'blur' }" name="{{ name }}" id="field_{{ name }}_{{ widgetId }}" ng-model="message.{{ name }}"/>
                            {% if not isPreview %}
                                <span class="moto-widget-contact_form-field-error ng-cloak" ng-cloak ng-show="subscribeForm.{{name}}.$invalid && !subscribeForm.{{name}}.$pristine && !subscribeForm.{{name}}.emailInvalid" >{{ currentWidget.properties.messages.required | default('Field is required') }}</span>
                                <span class="moto-widget-contact_form-field-error ng-cloak" ng-cloak ng-show="subscribeForm.{{name}}.emailInvalid && !subscribeForm.{{name}}.$pristine" >{{ currentWidget.properties.messages.invalidEmail | default('Incorrect email') }}</span>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}

            {% if not isPreview %}
                <input type="hidden" name="status" value="{{ currentWidget.getStatusDefaultValue() }}"/>
                <div class="moto-widget-contact_form-success ng-cloak" ng-cloak ng-show="showSuccessMessage">
                    {{ currentWidget.properties.messages.success | default('You have been subscribed successfully') }}
                </div>
                <div class="moto-widget-contact_form-danger ng-cloak" ng-cloak ng-show="emailError && !isSubscribed">
                    {{ currentWidget.properties.messages.error | default('Sorry, your message was not sent') }}
                </div>
                <div class="moto-widget-contact_form-danger ng-cloak" ng-cloak ng-show="emailError && isSubscribed">
                    {{ currentWidget.properties.messages.alreadySubscribed | default('You are already subscribed to our newsletter') }}
                </div>
            {% endif %}

            <div class="moto-widget-contact_form-buttons{% if currentWidget.properties.inline %} moto-spacing-left-{{ currentWidget.properties.spacingBetweenElements }}{% endif %}">
                <div class="moto-widget moto-widget-button moto-preset-{{ currentWidget.properties.buttons.submit.preset }} moto-align-{{ currentWidget.properties.buttons.submit.align }}" data-preset="{{ currentWidget.properties.buttons.submit.preset }}" data-align="{{ currentWidget.properties.buttons.submit.align }}">
                    <a ng-click="submit()" class="moto-widget-button-link moto-size-{{ currentWidget.properties.buttons.submit.size }}"
                       data-size="{{ currentWidget.properties.buttons.submit.size }}"><span class="fa moto-widget-theme-icon"></span><span class="moto-widget-button-label">{{ currentWidget.properties.buttons.submit.label | default('Subscribe') }}</span></a>
                </div>
                <button type="submit" class="hidden"></button>
            </div>
        </form>
    </div>
</div>