{% liquid
  assign section_name = 'Banner Products'
  assign el_id = section_name | handle | append: '-' | append: section.id

  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif
  if section.settings.bg_overlay
    assign bg_overlay = 'bg-overlay'
  endif
%}

<style>
  #{{ el_id }} .banner-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  #{{ el_id }} .link2.desktop-cta {
    display: none;
  }
  #{{ el_id }} .swiper-pagination.left-align {
    padding-left: 0;
  }
  #{{ el_id }} .pointer-event-none {
    pointer-events: none;
  }
  #{{ el_id }} .link1, 
  #{{ el_id }} .link2 {
    pointer-events: auto;
  }
  @media screen and (min-width: 1024px) {
    #{{ el_id }} .h2, 
    #{{ el_id }} .p3 {
      color: var(--cream);
    }
    #{{ el_id }} .banner-text {
      display: none;
    }
    #{{ el_id }} .link1.mobile-cta {
      display: none;
    }
    #{{ el_id }} .link2.desktop-cta {
      display: inline-block;
    }
    #{{ el_id }} .swiper-wrapper {
      --gap: 20px;
      gap: var(--gap);
    }
    #{{ el_id }} .swiper-slide {
      flex-basis: calc(50% - var(--gap) / 2);
    }
    #{{ el_id }} .swiper-pagination {
      display: none;
    }
  }

</style>


<div id="{{ el_id }}" class="{{ padding_class }} {{ bg_overlay }}">
    <div class="container flex flex-column rowgap-30 d-rowgap-0 d-flex-row">
      <div class="banner relative col-d-7 d-pl-0 d-pr-60">
 
        
        {% if section.settings.image != blank or section.settings.image_mobile != blank %}
          {% if  section.settings.link_url != blank %}
            <a href="{{ section.settings.link_url }}" class="image-con relative">  
              {% else %}  
              <div class="image-con relative">
            {% endif %}
          {%- assign image_id = section_name | handle | append: '-image' -%}
          {% assign image_alt = section.settings.title |  escape %}

            {% render 'global-image-wrapper-responsive',
            image_id: image_id,
            image_alt: image_alt,
            desktop_image: section.settings.image,
            mobile_image: section.settings.image_mobile,
         %}
         {% if  section.settings.link_url != blank %}
          </a>
          {% else %}
          </div>
         {% endif %}
        {% endif %}
        <div class="pt-30 d-absolute d-left-0 d-top-0 d-pt-80 d-pl-50 d-pr-50 hd-pt-120 hd-pl-60 hd-pr-60 pointer-event-none">
        {% if section.settings.title != blank %}
          <div class="h2 pb-20 d-pb-25 t-max-450 hd-max-550">{{ section.settings.title }}</div>
        {% endif %}
        {% if section.settings.text != blank %}
          <div class="p3 banner-text pb-15 ">{{ section.settings.text |  newline_to_br }}</div>
        {% endif %}
        {% if section.settings.link_label != blank %}
          <a href="{{ section.settings.link_url }}" class="link2 desktop-cta uppercase">{{ section.settings.link_label }}</a>
          <a href="{{ section.settings.link_url }}" class="link1 mobile-cta uppercase">{{ section.settings.link_label }}</a>
        {% endif %}
        </div>

      </div>
      <div class="products col-d-5 d-pl-0 d-pr-0">
        {% if section.settings.products != blank %}
          <div class="swiper">

            <div class="swiper-wrapper pb-40 t-pb-50 d-pb-0 d-flex-wrap">
              {% for product in section.settings.products %}
               <div class="swiper-slide d-col-5 d-pl-0 d-pr-0">
                  {% render 'product-card' product: product %}
               </div>
              {% endfor %}
              </div>
              <div class="swiper-pagination left-align"></div>
            </div>

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

</div>

<script>
  {%- assign func_name_postfix = section.id | replace: '-', '' -%}

  function swiper_{{ func_name_postfix }}() {
   let swiper;
   let swiperInitiated = false;

   function init_{{ func_name_postfix }}() {
     if (swiperInitiated) {
       if (swiper) {
         swiper.destroy();
       }
       swiperInitiated = false;
     }

     if (window.innerWidth <= 1024) {
       if (!swiperInitiated) {
         swiperInitiated = true;
         swiper = new Swiper('#{{ el_id }} .swiper', {
           pagination: {
					  el: `#{{ el_id }} .swiper-pagination`,
					  clickable: true,
				  },
           slidesPerView: 2,
           spaceBetween: 15,

         });
       }
     }
   }

   document.addEventListener('DOMContentLoaded', function() {
     init_{{ func_name_postfix }}();
     window.addEventListener('resize', init_{{ func_name_postfix }});
   });

   document.addEventListener('shopify:section:load', function() {
     init_{{ func_name_postfix }}();
   });
  }

   swiper_{{ func_name_postfix }}();
</script>

{% schema %}
    {
      "name": "Banner + Products",
      "settings": [
        {
          "type": "header",
          "content": "Section Padding"
        },
        {
          "type": "select",
          "id": "padding",
          "label": "Padding",
          "options": [
            {
              "value": "no",
              "label": "No"
            },
            {
              "value": "sm",
              "label": "Small"
            },
            {
              "value": "md",
              "label": "Med"
            },
            {
              "value": "lg",
              "label": "Large"
            }
          ],
          "default": "md"
        },
        {
          "type": "checkbox",
          "id": "top_half_padding",
          "label": "Top half padding",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "bottom_half_padding",
          "label": "Bottom half padding",
          "default": false
        },
        {
          "type": "header",
          "content": "General Settings"
        },
        {
            "type": "checkbox",
            "id": "bg_overlay",
            "label": "Background Overlay",
            "default": false
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image Desktop"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Image Mobile"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Banner Title"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Banner Text"
        },
        {
              "type": "text",
              "id": "link_label",
              "label": "Link Label"
        },
        {
              "type": "url",
              "id": "link_url",
              "label": "Link URL"
        },
        {
              "type": "product_list",
              "id": "products",
              "label": "Products"
        }
      ],
      "presets": [
        {
          "name": "Banner + Products",
          "blocks": []
        }
      ]
    }
{% endschema %}