{%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }

    .banner-container {
        width: 100%;
        margin: 0 auto;
    }

    .desktop-banner-section {
        position: relative;
        overflow: hidden;
    }

    .carousel {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-slide {
        min-width: 100%;
        box-sizing: border-box;
    }

    .item.pointer {
        cursor: pointer;
    }

    .banner-image {
        width: 100%;
        height: auto;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
    }

    .banner-image img {
        width: 100%;
        height: auto; 
      border-radius: 8px 8px 0 0;
    }

    .home-banner-caption {
        justify-content: space-around;
        display: flex;
        text-align: center;
        align-items: center;
        background: #fff;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .banner-subCard {
        text-align: center;
        width: 20%;
        padding: 10px 0;
        border-right: 1px solid #e3e3e3;
        border-bottom: 2px solid transparent;
    }

    .banner-subCard:hover {
        border-bottom: 2px solid #e12332;
    }

    .banner-subCard:hover p.bold-caption,
    .banner-subCard:hover p.card-sub-title {
        color: #e12332;
    }

    .bold-caption {
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        margin: 0;
    }

    .banner-subCard p.card-sub-title {
        font-size: 12px;
        line-height: 16px;
        margin: 0;
    }

    .category-subBanner {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .pwa-col-4 {
        width: 32%;
    }

    .pwa-row {
        display: flex;
        flex-wrap: wrap;
    }

    .pwa-col-4 .banner-image {
        height: auto;
    }

    .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

    .prev-button {
        left: 10px;
    }

    .next-button {
        right: 10px;
    }

    .banner-main-container {
        display: flex;
        gap: 2rem;
    }

    .sidebar-main-div {
        width: 20%;
        background-color: #f9f9f9;
        border-radius: 8px;
        position: relative;
    }

    @media screen and (max-width: 800px) {
        .sidebar-main-div {
            display: none;
        }
    }

    /* Responsive CSS for smaller screen sizes */
    @media screen and (max-width: 749px) {
        .banner-main-container {
            flex-direction: column;
            gap: 1rem;
        }

        .banner-subCard {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #e3e3e3;
        }

        .category-subBanner {
            flex-direction: column;
            margin-top: 10px;
            gap: 15px;
        }

        .pwa-col-4 {
            width: 100%;
        }
    }

    @media screen and (max-width: 600px) {
        .banner-subCard {
            padding: 8px 0;
        }

        .bold-caption {
            font-size: 10px;
        }

        .banner-subCard p.card-sub-title {
            font-size: 10px;
        }
    }

    @media screen and (max-width: 500px) {
        .home-banner-caption.cursor {
            display: none;
        }

        .banner-subCard {
            padding: 6px 0;
        }

        .bold-caption {
            font-size: 9px;
        }

        .banner-subCard p.card-sub-title {
            font-size: 9px;
        }

        .category-subBanner {
            flex-direction: column;
            margin-top: 10px;
            gap: 15px;
        }

        .pwa-col-4 {
            width: 100%;
        }
    }
{%- endstyle -%}




<section id="home-banner-slider-section">
  <div class="section-{{ section.id }}-padding color-{{ section.settings.color_scheme }} gradient">
    <div class="full-page-width">
      <div class="banner-main-container">
        <div class="sidebar-main-div">
          {% render 'sidebar-menu' %}
        </div>

        <div class="banner-container">
          <div class="desktop-banner-section">
            <div class="carousel">
              <div class="carousel-track">
                {% for block in section.blocks %}
                  {% if block.type == 'banner' %}
                    <div class="carousel-slide{% if forloop.first %} current-slide{% endif %}">
                      <div class="item pointer wp-100">
                        <a href="{{ block.settings.link }}">
                          <div class="banner-image">
                            <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.title }}">
                          </div>
                        </a>
                      </div>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
          <div class="home-banner-caption cursor">
            {% for block in section.blocks %}
              {% if block.type == 'banner' %}
                <div class="banner-subCard{% if forloop.first %} active{% endif %}" id="{{ forloop.index0 }}">
                  <p class="bold-caption">{{ block.settings.title }}</p>
                  <p class="card-sub-title">{{ block.settings.subtitle }}</p>
                </div>
              {% endif %}
            {% endfor %}
          </div>
          <div class="pwa-row category-subBanner">
            {% for block in section.blocks %}
              {% if block.type == 'sub_banner' %}
                <div class="pwa-col-4">
                  <a href="{{ block.settings.link }}">
                    <div class="banner-image">
                      <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.title }}">
                    </div>
                  </a>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="scripts.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
      const track = document.querySelector('.carousel-track');
      const slides = Array.from(track.children);
      const bannerSubCards = document.querySelectorAll('.banner-subCard');

      let currentIndex = 0;
      let autoplayInterval;

      const updateSlidePosition = () => {
          const currentSlide = slides[currentIndex];
          track.style.transform = 'translateX(-' + currentSlide.style.left + ')';
      };

      const moveToSlide = (index) => {
          if (index < 0) {
              currentIndex = slides.length - 1;
          } else if (index >= slides.length) {
              currentIndex = 0;
          } else {
              currentIndex = index;
          }
          updateSlidePosition();
      };

      const startAutoplay = () => {
          autoplayInterval = setInterval(() => {
              moveToSlide(currentIndex + 1);
          }, 3000); // Adjust autoplay speed here (in milliseconds)
      };

      const stopAutoplay = () => {
          clearInterval(autoplayInterval);
      };

      slides.forEach((slide, index) => {
          slide.style.left = 100 * index + '%';
      });

      bannerSubCards.forEach((card, index) => {
          card.addEventListener('mouseenter', () => {
              moveToSlide(index);
              stopAutoplay();
          });
          card.addEventListener('mouseleave', () => {
              startAutoplay();
          });
      });

      // Start autoplay when the page loads
      startAutoplay();
  });
</script>


{% schema %}
{
  "name": "Home Banner Slider",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
     {
      "type": "link_list",
      "id": "main_menu",
      "label": "Main Menu",
      "default": "main-menu"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ],
   "blocks": [
    {
      "type": "banner",
      "name": "Banner",
      "settings": [
        {
          "type": "url",
          "id": "link",
          "label": "Banner Link"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Banner Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Banner Title"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "Banner Subtitle"
        }
      ]
    },
    {
      "type": "sub_banner",
      "name": "Sub Banner",
      "settings": [
        {
          "type": "url",
          "id": "link",
          "label": "Sub Banner Link"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Sub Banner Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Home Banner Slider section"
    }
  ]
}
{% endschema %}
