<div class="newsletter-popup-overlay"></div>

<div 
    class="newsletter-popup newsletter-popup-stage-signup"
    data-show-by-scroll="{{ section.settings.show_by_scroll }}"
    data-scroll-position="{{ section.settings.scroll_position }}"
>
    <div class="newsletter-popup-close">
        {% render 'icon-close' %}
    </div>

    {% render 'image', 
        image: section.settings.image,
        placeholder_padding_vertical: 40,
        placeholder_padding_horizontal: 40 %}

    <div class="newsletter-popup-content">
        <h3>{{ section.settings.heading | replace: "[brand]", shop.name }}</h3>

        <div class="newsletter-popup-error">{{ 'sections.newsletter-popup.error' | t }}</div>

        {%- assign formId = 'newsletter-popup-form' -%}
        {% form 'customer', id: formId, novalidate: 'novalidate' %}
            <div class="footer-column-newsletter-inputs">
                <input 
                    type="email"
                    name="contact[email]"
                    class="newsletter-input{% if form.errors %} input--error{% endif %}"
                    placeholder="{{ 'sections.newsletter-popup.placeholder' | t }}">
                <button type="submit" class="btn newsletter-submit" name="commit">{{ 'sections.newsletter-popup.button' | t }}</button>
            </div>
        {% endform %}

        <p class="footer-column-newsletter-privacy-policy">{{ 'sections.newsletter-popup.policy_text' | t }}<a href="/policies/privacy-policy">{{ 'sections.newsletter-popup.policy_link' | t }}</a>.</p>
    </div>
</div>

<div class="newsletter-popup newsletter-popup-stage-success">
    <div class="newsletter-popup-close">
        {% render 'icon-close' %}
    </div>

    <div class="newsletter-popup-content">
        <h3>{{ 'sections.newsletter-popup.success_headline' | t }}</h3>

        <p>{{ 'sections.newsletter-popup.success_text' | t }}</p>

        <span>{{ 'sections.newsletter-popup.success_info' | t }}</span>
    </div>
</div>

{% schema %}
{
    "name": "t:sections.section-newsletter-popup.name",
    "limit": 1,
    "settings": [
        {
            "type": "image_picker",
            "id": "image",
            "label": "t:sections.section-newsletter-popup.settings.image"
        },
        {
            "type": "richtext",
            "id": "heading",
            "label": "t:sections.section-newsletter-popup.settings.heading",
            "info": "t:sections.section-newsletter-popup.settings.heading_info"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "checkbox",
            "id": "show_by_scroll",
            "default": false,
            "label": "t:sections.section-newsletter-popup.settings.show_by_scroll",
            "info": "t:sections.section-newsletter-popup.settings.show_by_scroll_info"
        },
        {
            "type": "range",
            "id": "scroll_position",
            "label": "t:sections.section-newsletter-popup.settings.scroll_position",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "%",
            "default": 50
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-newsletter-popup.name"
        }
    ]
}
{% endschema %}