{%- assign section_color = section.settings.color_scheme -%}


<section class="newsletter section-with-padding color--{{ section_color }}-text bg--{{ section_color }}-background" data-section-type="newsletter" data-section-id="{{ section.id }}">
<div class="max-site-width lg--up--px3">
<div class="grid">

<div class="grid__item lg--up--one-quarter">
<div class="pb1 pl2 pr4 lg--up--p0">
{% if section.settings.title == blank %}
<h2 class="f--heading font-size__heading m0">{{ 'homepage.onboarding.newsletter_title' | t }}</h2>
{% else %}
<h2 class="f--heading font-size__heading m0">{{ section.settings.title }}</h2>
{% endif %}
</div>
</div>
<div class="grid__item lg--up--one-quarter">
<div class="pb3 px2 lg--up--p0">
{% if section.settings.text != blank %}
<div class="line-height--3 font-size__basic">
{{ section.settings.text }}
</div>
{% endif %}
</div>
</div>

<div class="grid__item lg--up--two-quarters">
<div class="px2 lg--up--px0">
{% assign form_id = 'customer-form-' | append: section.id %}
{% form 'customer', id: form_id %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="form-message f--main" data-form-status>{{ 'general.newsletter_form.confirmation' | t }}</p>
{% else %}
<div class="input-group">
<input type="hidden" name="contact[tags]" value="newsletter">
<label for="Email-{{ section.id }}" class="visually-hidden">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
<input type="email"
name="contact[email]"
id="Email-{{ section.id }}"
class="input-group-field px2 py1 bg--transparent border--{{ section_color }}-text color--{{ section_color }}-text"
value="{% if customer %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}"
autocorrect="off"
autocapitalize="off">
<span class="input-group-btn">
<button type="submit" class="btn border--none newsletter__submit px2 py1 bg--{{ section_color }}-text border--{{ section_color }}-text color--{{ section_color }}-text--overlay hover-bg-border--{{ section_color }}" name="commit" id="Subscribe-{{ section.id }}">
<span class="newsletter__submit">{{ 'general.newsletter_form.submit' | t }}</span>
</button>
</span>
</div>
{% endif %}
{% endform %}
</div>
</div>

</div>
</div>
</section>

{% schema %}
{
"name": "Newsletter",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Sign up to our newsletter"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Receive special offers and first look at new products.</p>"
},
{
"type": "paragraph",
"content": "Customers who subscribe will have their email address added to the “accepts marketing” [customer list](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "header",
"content": "Color"
},
{
"type": "select",
"id": "color_scheme",
"label": "Color scheme",
"options": [
{ "value": "primary", "label": "Primary"},
{ "value": "secondary", "label": "Secondary"},
{ "value": "tertiary", "label": "Tertiary"}
]
}
],
"presets": [
{
"name": "Newsletter",
"category": "Promotional"
}
]
}
{% endschema %}