{% comment %} TODO: Thieu style cho button {% endcomment %}
{% comment %} TODO: Thieu model nhap password {% endcomment %}

{{ 'section-email-signup-banner.css' | asset_url | stylesheet_tag }}


<div {% render 'section-attr' %}>
  <xo-container class='xo-subscribe'>
    <xo-tabs class='xo-subscribe__content'>
      <xo-tabs-pane xo-name='subscribe-enter-email' xo-active>
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'banner' -%}
              <div class='xo-subscribe__banner'>
                {% if block.settings.banner != blank %}
                  <img
                    src='{{ block.settings.banner | image_url: width: 240 }}'
                    width='auto'
                    height='auto'
                    alt=''
                    loading='lazy'
                  >
                {% endif %}
                <h2>{{ block.settings.banner_heading }}</h2>
              </div>
            {%- when 'content_description' -%}
              <div class='xo-subscribe__description' {{ block.shopify_attributes }}>
                <h3>{{ block.settings.title }}</h3>
                <p>{{ block.settings.description }}</p>
              </div>
          {% endcase %}
        {%- endfor -%}
        {% render 'space', value: '2.8rem', value_mobile: '1.6rem' %}
        {% form 'customer', class: 'newsletter-form' %}
          {% render 'form-error', form: form %}
          {% assign emailValue = form.email %}
          {% assign emailLabel = 'sections.email_signup.email' | t %}
          <div class='xo-subcribe__field-input'>
            {% render 'field-input', type: 'text', name: 'contact[email]', value: emailValue, placeholder: emailLabel %}
            <div class='xo-footer__field-button'>
              {% render 'button', text: 'Subscribe', size: 'md', block: true %}
            </div>
          </div>
        {% endform %}
        {% render 'space', value: '3.8rem', value_mobile: '1.6rem' %}
        <xo-tabs-trigger xo-name='subscribe-enter-password' style='display: flex; justify-content: center;'>
          {% assign enterPassLabel = 'Enter using password' %}
          {% render 'button', text: enterPassLabel, size: 'md', style: 'link' %}
        </xo-tabs-trigger>
      </xo-tabs-pane>

      <xo-tabs-pane xo-name='subscribe-enter-password' style='height: 100%;'>
        <div class='xo-subcribe__password'>
          {% comment %}
            <xo-tabs-trigger xo-name='subscribe-enter-email'>
              {% render 'icon', name: 'close' %}
            </xo-tabs-trigger>
          {% endcomment %}
          <h2>{{ 'general.password_page.login_form_heading' | t }}</h2>
          {% render 'space', value: '3.6rem', value_mobile: '1.6rem' %}
          {%- form 'storefront_password' -%}
            <div class='content__input-password'>
              <div class='xo-subcribe__field-input'>
                {% assign passwordLabel = 'general.password_page.login_form_password_placeholder' | t %}
                {% render 'field-input', type: 'password', name: 'password', placeholder: passwordLabel %}
                <div class='xo-footer__field-button'>
                  {% assign btnLabel = 'general.password_page.login_form_submit' | t %}
                  {% render 'button', text: btnLabel, size: 'md', block: true %}
                </div>
              </div>
            </div>
          {%- endform -%}
          {% render 'space', value: '3.6rem', value_mobile: '1.6rem' %}
        </div>
      </xo-tabs-pane>
    </xo-tabs>
  </xo-container>
</div>

{% schema %}
{
  "name": "t:sections.email_signup_banner.name",
  "class": "section",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "learn_more",
      "label": "t:sections.email_signup_banner.settings.learn_more.label",
      "default": "Enter using password"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "banner",
      "name": "t:sections.email_signup_banner.settings.blocks.banner.name",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "banner",
          "label": "t:sections.email_signup_banner.settings.blocks.banner.image.label"
        },
        {
          "type": "text",
          "id": "banner_heading",
          "label": "t:sections.email_signup_banner.settings.blocks.banner.heading.label",
          "default": "Heading"
        }
      ]
    },
    {
      "type": "content_description",
      "name": "t:sections.email_signup_banner.settings.blocks.content_description.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.email_signup_banner.settings.blocks.content_description.title.label",
          "default": "Title"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "t:sections.email_signup_banner.settings.blocks.content_description.description.label",
          "default": "Description"
        }
      ]
    },
    {
      "type": "input_email",
      "name": "t:sections.email_signup_banner.settings.blocks.input_email.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "place_holder",
          "label": "t:sections.email_signup_banner.settings.blocks.input_email.place_holder.label",
          "default": "Placeholder"
        },
        {
          "type": "text",
          "id": "button_submit",
          "label": "t:sections.email_signup_banner.settings.blocks.input_email.button_submit.label",
          "default": "Subscribe"
        }
      ]
    }
  ]
}
{% endschema %}
