{% liquid
  
  assign section_name = 'Hero Banner'
  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 }}__inner {
    background: var(--brown);
  }
  
  #{{ el_id }} .swiper-slide:not(:has(img)):not(:has(video)) {
    min-height: 75vh;
  }
  
  .{{ el_id }}__content {
    inset: 0;
    color: white;
  }
  
  .{{ el_id }}__pagination {
    position: absolute;
    bottom: 40px !important;
    z-index: 1;
    display: flex;
    column-gap: 14px;
    justify-content: center;
  }
  
  .{{ el_id }}__pagination .swiper-pagination-bullet {
    width: 80px;
    height: 2px;
    background: rgba(250, 249, 245, .5);
    border-radius: 0px;
    margin: 0px;
    position: relative;
    opacity: 1;
  }
  
  .{{ el_id }}__pagination .swiper-pagination-bullet-active span {
    --progress: 0%;
    content: "";
    position: absolute;
    width: {% if section.settings.autoslide %}var(--progress){% else %}100%{% endif %};
    left: 0;
    background: white;
    height: 100%;
  }
  
  .{{ el_id }}__overlay {
    background: linear-gradient(180deg, #59483D 0%, rgba(89, 72, 61, 0.00) 100%);
    mix-blend-mode: multiply;
    opacity: 1;
  }
  
  .{{ el_id }}__content [class*="col-"]::before,
  .{{ el_id }}__content [class*="col-"]::after {
    display: none;
  }
  
  .{{ el_id }}__content p {
    margin-top: 8px;
  }
  
  .{{ el_id }}__link-wrapper {
    margin-top: 3px;
  }
  
  @media only screen and (min-width: 1024px) {
    
    .{{ el_id }}__content p,
    .{{ el_id }}__link-wrapper {
      margin: 0;
    }
    
  }
  
</style>

<div id="{{ el_id }}" class="{{ padding_class }}">
  <div class="{{ el_id }}__inner swiper relative">
    <div class="swiper-wrapper relative">
      {%- for block in section.blocks -%}
        
        {% capture image_render %}
        {%- if block.settings.image and block.settings.image_m -%}
          {%- assign image_alt = section_name | append: ' image' %}
          {%- assign image_id =  block.id | append: '-image' %}
          {%- assign overlay_class =  el_id | append: '__overlay' %}
          {%- render 'global-image-wrapper-responsive',
            desktop_image: block.settings.image,
            mobile_image: block.settings.image_m,
            image_id: image_id,
            preload: block.settings.preload_image,
            image_alt: image_alt,
            overlay: block.settings.overlay,
            overlay_class: overlay_class
          -%}
        {%- endif -%}
        {% endcapture %}
        
        {% capture video_render %}
        {% if block.settings.video %}
          {{
            block.settings.video
            | video_tag:
            image_size: '1100x',
            controls: false,
            loop: true,
            autoplay: true,
            muted: true,
            playsinline: true,
            preload: 'auto',
            class: 'hide-m show-t w-full'
          }}
        {% endif %}
        {% if block.settings.video_m %}
          {{
            block.settings.video_m
            | video_tag:
            image_size: '1100x',
            controls: false,
            loop: true,
            autoplay: true,
            muted: true,
            playsinline: true,
            preload: 'auto',
            class: 'hide-t w-full'
          }}
        {% endif %}
        {% endcapture %}
        
        <div class="swiper-slide relative">
          {% if block.settings.media_type == "image" %}
            {{ image_render }}
            {% elsif block.settings.media_type == "video" %}
            {{ video_render }}
          {% endif %}
          {% assign wrapper_el = "div" %}
          {% assign href = block.settings.link_url %}
          {% if href %}
            {% assign wrapper_el = "a" %}
          {% endif %}
          <{{ wrapper_el }}
            {% if href != blank %}href="{{ href }}"{% endif %}
            class="{{ el_id }}__content container absolute w-full h-full flex ai-center jc-center zi-1">
            <div class="w-full">
              <div class="row flex jc-center">
                {% capture column_classes %}
                col-{{ block.settings.col }} col-t-{{ block.settings.col_t }} col-d-{{ block.settings.col_d }}
                {% endcapture %}
                <div class="{{ column_classes }} flex flex-column rowgap-10 d-rowgap-25 tc">
                  {% unless block.settings.title == blank %}
                    <{{ block.settings.title_element }} class="{{ block.settings.title_class }}">
                      {{ block.settings.title }}
                    </{{ block.settings.title_element }}>
                  {% endunless %}
                  {% unless block.settings.text == blank %}
                    <p class="{{ block.settings.text_class }}">
                      {{ block.settings.text }}
                    </p>
                  {% endunless %}
                  {% unless block.settings.link_label == blank %}
                    <div class="{{ el_id }}__link-wrapper">
                      <span class="{{ block.settings.link_class }}">
                        {{ block.settings.link_label }}
                      </span>
                    </div>
                  {% endunless %}
                </div>
              </div>
            </div>
          </{{ wrapper_el }}>
        </div>
        
      {%- endfor -%}
    </div>
    <div class="{{ el_id }}__pagination"></div>
  </div>
</div>

<script>
  {% if section.settings.transparent_header %}
    document.querySelector('body').classList.add('transparent-header');
  {% endif %}
  {%- assign func_name_postfix = section.id | replace: '-', '' -%}
  function init_{{ func_name_postfix }}() {
    new Swiper('.{{ el_id }}__inner', {
      autoHeight: true,
      pagination: {
        el: ".{{ el_id }}__pagination",
        clickable: true,
        renderBullet: function(index, className) {
          return `<div class="${className}"><span></span></div>`
        }
      },
      {% if section.settings.autoslide %}
        autoplay: {
          delay: {{ section.settings.interval | times: 1000 }}
        },
      {% endif %}
      on: {
        init: function() {
          $360.lazyLoadInstance.update();
        },
        autoplayTimeLeft(s, time, progress) {
          const progressBar = document.querySelector(".swiper-pagination-bullet-active span");
          progressBar.style.setProperty("--progress", `${(1 - progress) * 100}%`);
        }
      }
    });
  }
  document.addEventListener('DOMContentLoaded', function() {
    init_{{ func_name_postfix }}();
  });
  document.addEventListener('shopify:section:load', function() {
    init_{{ func_name_postfix }}();
  });
</script>

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "checkbox",
      "id": "transparent_header",
      "label": "Transparent Header"
    },
    {
      "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": "no"
    },
    {
      "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": "Slider Settings"
    },
    {
      "type": "checkbox",
      "id": "autoslide",
      "label": "Enable autoslide"
    },
    {
      "type": "range",
      "id": "interval",
      "min": 3,
      "max": 15,
      "step": 1,
      "unit": "sec",
      "label": "Delay for autoslide",
      "default": 5
    },
  ],
  "blocks": [
    {
      "type": "banner",
      "name": "Banner",
      "settings": [
        {
          "type": "header",
          "content": "Media"
        },
        {
          "type": "select",
          "id": "media_type",
          "label": "Media Type",
          "options": [
            { "label": "Image", "value": "image" },
            { "label": "Video", "value": "video" },
          ],
          "default": "image"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image (Tablet and All Desktop)"
        },
        {
          "type": "image_picker",
          "id": "image_m",
          "label": "Image (Mobile)"
        },
        {
          "type": "checkbox",
          "id": "preload_image",
          "label": "Preload Image"
        },
        {
          "type": "checkbox",
          "id": "overlay",
          "label": "Show Overlay"
        },
        {
          "type": "video",
          "id": "video",
          "label": "Video (Tablet and All Desktop)"
        },
        {
          "type": "video",
          "id": "video_m",
          "label": "Video (Mobile)"
        },
        {
          "type": "header",
          "content": "Title"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Banner 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": "h1"
        },
        {
          "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": "h1"
        },
        {
          "type": "header",
          "content": "Description"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Description",
          "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        },
        {
          "type": "select",
          "id": "text_class",
          "label": "Description Class",
          "options": [
            { "value": "p1", "label": "p1" },
            { "value": "p2", "label": "p2" },
            { "value": "p3", "label": "p3" },
            { "value": "p4", "label": "p4" },
            { "value": "p5", "label": "p5" },
          ],
          "default": "p3"
        },
        {
          "type": "header",
          "content": "Link"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link Label",
        },
        {
          "type": "select",
          "id": "link_class",
          "label": "Link Class",
          "options": [
            { "value": "link1", "label": "link1" },
            { "value": "link2", "label": "link2" },
            { "value": "link3", "label": "link3" },
          ],
          "default": "link2"
        },
        {
          "type": "url",
          "id": "link_url",
          "label": "Link URL"
        },
        {
          "type": "header",
          "content": "Dimension"
        },
        {
          "type": "range",
          "id": "col",
          "label": "Title Width (Mobile)",
          "min": 1,
          "max": 12,
          "step": 1,
          "unit": "col",
          "default": 12
        },
        {
          "type": "range",
          "id": "col_t",
          "label": "Title Width (Tablet)",
          "min": 1,
          "max": 12,
          "step": 1,
          "unit": "col",
          "default": 8
        },
        {
          "type": "range",
          "id": "col_d",
          "label": "Title Width (All Desktop)",
          "min": 1,
          "max": 12,
          "step": 1,
          "unit": "col",
          "default": 4
        },
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero Banner",
      "blocks": []
    }
  ]
}
{% endschema %}