{% liquid
  
  assign section_name = 'Small 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

%}

<style>
  
  #{{ el_id }} {
    overflow: hidden;
  }

  .{{ el_id }}__slider {
    margin-left: -15px;
    margin-right: -15px;
    width: 150vw;
    transform: translateX(-25vw);
  }

  @media only screen and (min-width: 600px) {
    
    .{{ el_id }}__slider {
      margin-left: -20px;
      margin-right: -20px;
    }

  }

  @media only screen and (min-width: 1024px) {

    .{{ el_id }}__slider {
      margin-left: initial;
      margin-right: initial;
      width: unset;
      transform: unset;
    }

  }

</style>

{% capture title %}
  {% unless section.settings.title == blank %}
    <{{ section.settings.title_element }} class="{{ section.settings.title_class }}">
      {{ section.settings.title }}
    </{{ section.settings.title_element }}>
  {% endunless %}
{% endcapture %}

{% liquid
  assign section_classes = padding_class | append: " container"
  if section.settings.use_bg_overlay
    assign section_classes = section_classes | append: " bg-overlay"
  endif
%}

<div id="{{ el_id }}" class="{{ section_classes }} container">
  <div class="row">
    <div class="flex flex-column d-flex-row ai-center rowgap-30">
      <div class="col-12 col-d-4 tc d-tl">
        {{ title }}
      </div>
      <div class="col-12 col-d-8">
        <div class="{{ el_id }}__slider swiper">
          <div class="swiper-wrapper">
            {% assign blocks = section.blocks %}
            {% assign doubled_blocks = blocks | concat: blocks %}
            {% for block in doubled_blocks %}
              <div class="swiper-slide">
                <a href="{{ block.settings.url }}" class="flex flex-column rowgap-15">
                  {% unless block.settings.image == blank %}
                    {% assign image_alt = block.settings.text %}
                    {% render 'global-image-wrapper',
                      image: block.settings.image,
                      image_alt: image_alt,
                      preload: true
                    %}
                  {% endunless %}
                  <p class="p3">{{ block.settings.text }}</p>
                </a>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

  {%- assign func_name_postfix = section.id | replace: '-', '' -%}
  function init_{{ func_name_postfix }}() {
    const swiper = new Swiper('.{{ el_id }}__slider', {
      autoHeight: true,
      spaceBetween: 8,
      slidesPerView: 3,
      loop: true,
      breakpoints: {
        1024: {
          slidesPerView: 3,
          allowTouchMove: false,
        }
      },
      on: {
        init: function() {
          $360.lazyLoadInstance.update();
        },
      }
    });
  }
  document.addEventListener('DOMContentLoaded', function() {
    init_{{ func_name_postfix }}();
  });
  document.addEventListener('shopify:section:load', function() {
    init_{{ func_name_postfix }}();
  });

</script>

{% schema %}
{
  "name": "Small Banners",
  "settings": [
    {
      "type": "header",
      "content": "Section General"
    },
    {
      "type": "checkbox",
      "id": "use_bg_overlay",
      "label": "Use Background Overlay",
      "info": "Class .bg-overlay will be applied to this section when checked"
    },
    {
      "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": "Title"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Small Banners Title"
    },
    {
      "type": "select",
      "id": "title_element",
      "label": "Title Element",
      "options": [
        { "value": "h1", "label": "h1" },
        { "value": "h2", "label": "h2" },
        { "value": "h3", "label": "h3" },
        { "value": "h4", "label": "h4" },
        { "value": "h5", "label": "h5" },
        { "value": "h6", "label": "h6" }
      ],
      "default": "h4"
    },
    {
      "type": "select",
      "id": "title_class",
      "label": "Title Class",
      "options": [
        { "value": "h1", "label": "h1" },
        { "value": "h2", "label": "h2" },
        { "value": "h3", "label": "h3" },
        { "value": "h4", "label": "h4" },
        { "value": "h5", "label": "h5" },
        { "value": "h6", "label": "h6" },
        { "value": "h7", "label": "h7" },
      ],
      "default": "h4"
    },
  ],
  "blocks": [
    {
      "type": "item",
			"name": "Image + Text",
      "settings": [
        {
					"type": "image_picker",
					"id": "image",
					"label": "Image"
				},
        {
					"type": "text",
					"id": "text",
					"label": "Text",
          "default": "Text"
				},
        {
          "type": "url",
          "id": "url",
          "label": "URL"
        },
      ]
    }
  ],
  "presets": [
    {
			"name": "Small Banners",
      "blocks": []
	  }
  ]
}
{% endschema %}