{% assign hex2rgb_r = '' %}
{% assign hex2rgb_g = '' %}
{% assign hex2rgb_b = '' %}	
{% if section.settings.newsletter_bg != 'rgba(0,0,0,0)' and section.settings.newsletter_bg != '' %}

	{% assign hex2rgb_hex = section.settings.newsletter_bg %}
	{% include 'hex2rgb' %}
{% endif %}
{% assign bg_opactiy = section.settings.newsletter_bg_opacity %}

<div id="home-newsletter" class="index-section home-section" style="background-color:rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }},{{ bg_opactiy }});">
  <div class="grid">
  	<div class="home-newsletter">
    <div class="wrapper wrapper--margins">
      <div class="newsletter text-center password-input-group">
        {% form 'customer' %}
          {{ form.errors | default_errors }}
          {% if form.posted_successfully? %}
            <p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>
          {% else %}
            <div class="input-group">
              {% if section.settings.title != blank %}
                <label style="color:{{ section.settings.newsletter_header_color}};font-weight:{{ section.settings.heading_tag_text_style14}};" class="h2 home-section-title text-center" for="Email">{{ section.settings.title | escape }}</label>
              {% else %}
                <label style="color:{{ section.settings.newsletter_header_color}};font-weight:{{ section.settings.heading_tag_text_style14}};" class="visually-hidden" for="Email">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
              {% endif %}
              <input required type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}" name="contact[email]" id="Email" class="input-group__field newsletter__input" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" autocorrect="off" autocapitalize="off">
              <input type="hidden" name="contact[tags]" value="newsletter">
              {% if settings.newsletter_terms_enable %}
                <div class="rgpd_wrapper">
                  <input type="checkbox" id="rgpdAgree1" />
                  <label for="rgpdAgree1">
                    {{ settings.newsletter_terms_text }}
                    <a href="#" data-getPopout="#NewsletterTermsPopup" class="hasPop newsletter_terms_popup_trigger">
                      {{ settings.newsletter_terms_link_text }}
                    </a>
                  </label>
                  <div class="rgpd_error rgpd_error1" style="display:none;">
                      {{ settings.newsletter_terms_warning }}
                  </div>
                </div>

              {% endif %}
              <span class="input-group__btn">
                {%comment%}<button type="submit" class="btn newsletter__submit btn--regular btn--fill btn--color button" name="commit" id="Subscribe">
                  <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
                </button>{%endcomment%}
                        <input type="submit" class="btn" name="subscribe" id="subscribe subscribe1" value="{{ settings.newslatter_btn_text }}">

              </span>
            </div>
          {% endif %}
        {% endform %}
        
      </div>
    </div>
  </div>
  </div>
</div>

{% schema %}
  {
    "name": "Newsletter",
    "settings": [
{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Newsletter by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/newsletter)"
        },
      {
        "type": "text",
        "id": "title",
        "label": "Header",
        "default": "Newsletter"
      },
	  {
        "type": "select",
        "id": "heading_tag_text_style14",
        "label": "Heading Font Style",
        "options": [
            {
              "value": "300",
              "label": "Lighter",
              "group": "Font Style"
            },
            {
              "value": "400",
              "label": "Normal",
              "group": "Font Style"
            },
            {
              "value": "600",
              "label": "Bold",
              "group": "Font Style"
            },
            {
              "value": "700",
              "label": "Bolder",
              "group": "Font Style"
            }
          ],
        "default": "600"
      },
	  {
		"type":"color",
		"id":"newsletter_bg",
		"label":"Background Color",
		"default":"#ffffff"
	  },
	  {
		"type":"color",
		"id":"newsletter_header_color",
		"label":"Heading Color",
		"default":"#000000"
	  },

	  {
        "type": "select",
        "id": "newsletter_bg_opacity",
        "label": "Opacity Background Color",
        "default": ".6",
        "options": [
            {
              "value": "0",
              "label": "Transparent"
            },
            {
              "value": ".1",
              "label": "10%"
            },
            {
              "value": ".2",
              "label": "20%"
            },
            {
              "value": ".3",
              "label": "30%"
            },
            {
              "value": ".4",
              "label": "40%"
            },
            {
              "value": ".5",
              "label": "50%"
            },
            {
              "value": ".6",
              "label": "60%"
            },
            {
              "value": ".7",
              "label": "70%"
            },
            {
              "value": ".8",
              "label": "80%"
            },
            {
              "value": ".9",
              "label": "90%"
            },
            {
              "value": "1",
              "label": "100%"
            }
          ]
        },
      {
        "type": "paragraph",
        "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
      }
    ],
    "presets": [{
      "name": "Newsletter",
      "category": "Promotional"
    }],
    "blocks" : []
  }
{% endschema %}