<div class="newsletter_parallex_section" id="{{ section.id }}">
  <div class="ps_container lazyload">
    <div class="page-width">
      {% if section.settings.title != blank or section.settings.short_desc != blank %}
      <div class="section-header text-center">
        {% if section.settings.title != blank %}
        <h1>{{ section.settings.title }}</h1>
        {% endif %}
        {% if section.settings.short_desc != blank %}
        <p>{{ section.settings.short_desc }}</p>
        {% endif %}
      </div>
      {% endif %}
      <div class="ps_newsletter">
        {%- assign formId = 'Contact_' | append: section.id -%}
        {% form 'customer', id: formId, novalidate: 'novalidate', class: 'contact-form form-single-field' %}
        {%- if form.posted_successfully? -%}
        <p class="form-message form-message--success" tabindex="-1" data-form-status>
          {{ 'general.newsletter_form.confirmation' | t }}
        </p>
        {%- endif -%}
        <input type="hidden" name="contact[tags]" value="newsletter">
        <div class="input-group {% if form.errors %} input-group--error{% endif %}">
          <input type="email"
                 name="contact[email]"
                 id="{{ formId }}-email"
                 class="input-group__field{% if form.errors %} input--error{% endif %}"
                 value="{{ form.email }}"
                 placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
                 aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}"
                 aria-required="true"
                 autocorrect="off"
                 autocapitalize="off"
                 {% if form.errors %}
                 aria-invalid="true"
                 aria-describedby="{{ formId }}-email-error"
                 data-form-status
                 {% endif %}
                 >
          <span class="input-group__btn">
            <button type="submit" class="btn" name="commit">
              <span>{{ 'Subscribe' }}</span>
            </button>
          </span>
        </div>
        {%- if form.errors contains 'email' -%}
        <span id="{{ formId }}-email-error" class="input-error-message">
          <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
          {% include 'icon-error' %}
          <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
        </span>
        {%- endif -%}
        {% endform %}
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  .newsletter_parallex_section .ps_container .ps_newsletter .contact-form .input-group .input-group__btn .btn {
    background: {{ section.settings.btn_bg_color }};
    color: {{ section.settings.btn_text_color }};
  }
  .newsletter_parallex_section .ps_container .ps_newsletter .contact-form .input-group .input-group__btn .btn:hover {
    background: {{ section.settings.btn_bg_hover_color }};
    color: {{ section.settings.btn_text_hover_color }};
  }
  .newsletter_parallex_section .ps_container {
    {% if section.settings.parallax_image != blank %} background-image: url({{ section.settings.parallax_image | img_url: 'master' }}); {%else%} background-image: url({{ 'parralex.jpg' | asset_url }}); {% endif %}
  }
  @media only screen and (max-width: 768px){
    .newsletter_parallex_section .ps_container {
      {% if section.settings.parallax_image_mobile != blank %} background-image: url({{ section.settings.parallax_image_mobile | img_url: 'master' }}); {%else%} background-image: url({{ 'parralex.jpg' | asset_url }}); {% endif %}
    }
  }
</style>



{% schema %}
  {
    "name": "Parallax Newsltter - Home",
    "settings": [
		{
			"type": "text",
			"id": "title",
			"label": "Título",
			"default": "SE INSCREVA NA NOSSA NEWSLETTER"
		},
		{
			"type": "textarea",
			"id": "short_desc",
			"label": "Descrição",
			"default": "Fique por dentro das nossas últimas notícias e produtos."
		},
		{
			"type": "image_picker",
			"id": "parallax_image",
			"label": "Imagens de fundo"
		},
		{
			"type": "image_picker",
			"id": "parallax_image_mobile",
			"label": "Imagens de fundo - mobile"
		},
		{
			"type": "header",
			"content": "Cor do botão"
		},
		{
        "type": "color",
        "id": "btn_bg_color",
        "label": "Cor de fundo do botão",
        "default": "#000000"
    },
    {
        "type": "color",
        "id": "btn_bg_hover_color",
        "label": "Cor de fundo do botão, ao passar mouse",
        "default": "#f39ac1"
    },
    {
        "type": "color",
        "id": "btn_text_color",
        "label": "Cor do texto do botão",
        "default": "#ffffff"
    },
    {
        "type": "color",
        "id": "btn_text_hover_color",
        "label": "Cor do texto do botão, ao passar mouse",
        "default": "#ffffff"
    }
	],
	"presets": [
		{
			"name": "Parallax Newsltter - Home",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
