{% liquid
  assign section_name = 'Block Banners'
  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 }} .bb__item-text  {
  width: 206px;
}

@media screen and (min-width: 1024px) {
  #{{ el_id }} .bb__item-text {
    width: 262px;
  }
  
}
</style>

<div id="{{ el_id }}" class="{{ padding_class }} {{ bg_overlay }}">
  <div class="container">
    <div class="swiper row">
      <div class="swiper-wrapper bb__grid d-flex d-jc-between col-d-12 row">
        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %}
            <div class="swiper-slide bb__item col-d-3 d-pl-0 d-pr-0">
              {% if block.settings.image != blank %}
                {% if block.settings.link_url != blank %}
                  <a href="{{ block.settings.link_url }}">
                {% endif %}
                {% render 'global-image-wrapper', image: block.settings.image, image_alt: block.settings.title %}
                {% if block.settings.link_url != blank %}
                  </a>
                {% endif %}
              {% endif %}

              <div class="flex flex-column ai-center rowgap-15 mt-30 mb-15">
              {% if block.settings.title != blank %}
                <div class="h6 bb__item-title flex">
                  {{ block.settings.title }}
                </div>
              {% endif %}

              <p class="p3 bb__item-text tc">
                {{ block.settings.text | newline_to_br }}
              </p>
              </div>
              {% if block.settings.link_label != blank %}
                <div class="tc">
                <a href="{{ section.settings.link_url }}" class="link1 uppercase">
                  {{- block.settings.link_label -}}
                </a>
                </div>
              {% endif %}
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </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', {
           slidesPerView: 1.4,
           spaceBetween: 15,
           slidesOffsetBefore: 30,
           slidesOffsetAfter: 0,
           breakpoints: {
             600: {
               slidesOffsetBefore: 30,
               slidesOffsetAfter: 0,
             },

           },
         });
       }
     }
   }

   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": "Block Banners",
  "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": "checkbox",
      "id": "bg_overlay",
      "label": "Background Overlay",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "banner",
      "name": "Banner",

      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },

        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "text"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link Label"
        },
        {
          "type": "url",
          "id": "link_url",
          "label": "Link URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Block Banners",
      "blocks": []
    }
  ]
}
{% endschema %}