{% if section.blocks.size > 0 %}
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.13.2/jquery-ui.js" defer="defer"></script>
  
  {% if section.settings.useslider %}
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer="defer"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
  {% endif %}
  
  
  <div class="tabs-section-{{ section.id }} {% if section.settings.container %}page-width {% endif %}">
    {% if section.settings.title != blank %}
      <h2 class="h1">{{ section.settings.title }}</h2>
    {% endif %}
    <div id="tabs" class="tabs">
      {% assign tabContent = '' %}
      <ul class="tabs-nav">
        {% for block in section.blocks %}
          {% assign collection = collections[block.settings.collection] %}
          <li>
            <a href="#tabs-{{ collection.id }}">{{ collection.title }}</a>
          </li>
          {% capture content %}
            <div id="tabs-{{ collection.id }}">
              <ul class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop">
                {% for product in block.settings.collection.products limit: 8 %}
                  <li class="grid__item slide-in">
                    {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: section.settings.image_ratio,
                      image_shape: section.settings.image_shape,
                      show_secondary_image: section.settings.show_secondary_image,
                      lazy_load: lazy_load,
                      section_id: section.id
                    %}
                  </li>
                {% endfor %}
              </ul>
              {% if block.settings.viewall %}
                <div class="center collection__view-all slide-in">
                  <a class="button" href="{{ block.settings.collection.url }}">View all</a>
                </div>
              {% endif %}
            </div>
          {% endcapture %}
          {% assign tabContent = tabContent | append: content %}
        {% endfor %}
      </ul>
      {{ tabContent }}
    </div>
  </div>
  <script>
    $(function() {
      {% if section.settings.useslider %}
        function tabSlider() {
         $('.tabs .product-grid.slick-initialized').slick('unslick');
          $('.tabs .product-grid').slick({
  centerMode: true,
  arrows: false,
  centerPadding: '60px',
  slidesToShow: 4,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
  });
          }



        function tabNavSlider() {

          $('.tabs .product-grid.slick-initialized').slick('refresh');
        }
      {% endif %}

      

      $( "#tabs" ).tabs({
        create: function(event, ui) {
          {% if section.settings.useslider %}
            tabSlider();
          {% endif %}
          tabNavSlider();
        },
        activate: function(event, ui) {
          {% if section.settings.useslider %}
            tabSlider();
          {% endif %}
        }
      });

      $(window).resize(function() {
        tabNavSlider();
      });
    });
  </script>
  <style>
     /* Slide-in animation */
@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideIn 0.8s ease-out;
}


    /* Slider */
    .tabs-section-{{ section.id }} .tabs .slick-slider {
      margin: 0 -5px;
    }
    .tabs-section-{{ section.id }} .slick-slide {
      margin: 0 10px;
    }
    .tabs-section-{{ section.id }} .tabs-nav .slick-track{
    width: auto!important;
    display: flex;
    align-items: center;
    }

    /* Tabs Navigation */
    .tabs-section-{{ section.id }} .tabs .collection__view-all a {
      color: white !important;
    }
    .tabs-section-{{ section.id }} .tabs {
      background: none !important;
      border: none !important;
    }
    .tabs-section-{{ section.id }} .tabs.ui-tabs .ui-tabs-nav {
      background: none;
      padding: 0;
      display: flex;
      justify-content: center;
      border: none;
      overflow: hidden;
      align-items: center;
    }
    .tabs-section-{{ section.id }} h2 {
      text-align: center;
    }
    .tabs-section-{{ section.id }} .tabs.ui-tabs .ui-tabs-nav li {
      border: none;
      background: none;
    }
    .tabs-section-{{ section.id }} .tabs.ui-tabs .ui-tabs-nav li a {
      color: #ddd;
      white-space: nowrap;
    }
    .tabs-section-{{ section.id }} .tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
      color: white;
    padding: 6px 12px;
    /* border: 1px solid grey; */
    border-radius: 20px;
    /* border-bottom: 2px solid #000; */
    background-color: rgb(35 86 73);
      
    }
    /*.tabs-section-{{ section.id }} .tabs-nav{
      border-bottom: 1px solid #f5f5f5!important;
    }*/
    .tabs-section-{{ section.id }} .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
      padding: 0px;
      margin: 0px 5px 0px 10px;
    }

    .tabs-section-{{ section.id }} .ui-tabs .ui-tabs-panel {
      display: block;
      border-width: 0;
      padding: 1em 0em;
      background: none;
    }
    @media (max-width: 600px) {
      .tabs-section-{{ section.id }} .tabs.ui-tabs .ui-tabs-nav {
        overflow: visible;
        padding-left: 110px;
        overflow-x: scroll;
        overflow-y: hidden;
      }
      .tabs-section-{{ section.id }} .tabs.ui-tabs .ui-tabs-nav li {
        width: auto;
      }
    }

    /* Card Information */
    .tabs-section-{{ section.id }} .card__information,.card-information {
      text-align: center !important;}
    .tabs-section-{{ section.id }} .card__content .card__information .card__heading{
          font-size: 16px;
          font-weight: 600;
      }
    .tabs-section-{{ section.id }} .card__inner .card__content .card-information>.price {
      color: rgb(95 95 95);
      font-size: 14px;
      }

     .tabs-section-{{ section.id }} .wishlist-engine-button{
        display:none;
      }



    
   .tabs-section-{{ section.id }}{
      padding-top: {{ section.settings.pt }}rem;
      padding-bottom: {{ section.settings.pb }}rem;
      padding-left:1.5rem;
      padding-right:1.5rem;
      margin-top: {{ section.settings.mt }}rem;
      margin-bottom: {{ section.settings.mb }}rem;
      background-color: {{ section.settings.bg_color }};
  }
  	.tabs-section-{{ section.id }} .slick-prev:before, .slick-next:before {
      color:grey!important;
      font-size: 30px;
      }
      .tabs-section-{{ section.id }} .slick-prev, .slick-next{
      top: 40%!important;
  }

    .tabs-section-{{ section.id }} .slick-slide {
      margin: 0 10px;
  }
     .tabs-section-{{ section.id }} .slick-prev {
      left: -13px!important;
      z-index: 1!important;
  }
      .tabs-section-{{ section.id }} .slick-next {
      right: 0px!important;
  }
  	.tabs-section-{{ section.id }} .card__content .card-information {
      width: auto!important;
  }
  .tabs-section-{{ section.id }} .card__content .card__information{
  	display: flex!important;
      flex-direction: column!important;
      align-items: center!important;
  }
      .tabs-section-{{ section.id }} .card__content .card__information .card__heading{
                font-size: 16px;
          font-weight: 600;
      }
  	.tabs-section-{{ section.id }} .card__inner .card__content .card-information>.price {
      color: rgb(95 95 95);
      font-size: 14px;
  }
  .tabs-section-{{ section.id }} .card-information>.price{
    color:{{ section.settings.price_color}};
  }
  .tabs-section-{{ section.id }} .full-unstyled-link{
    color:{{ section.settings.title_color}};
  }
  .tabs-section-{{ section.id }} .card__inner .card__content .card__information{
  	display:none!important;
  }

     .tabs-section-{{ section.id }} .wishlist-engine-button{
        display:none;
      }
    
  </style>
{% endif %}

{% schema %}
{
  "name": "Tabs",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "checkbox",
      "id": "useslider",
      "label": " Make it a slider",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "container",
      "label": "Wrap in a container",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "checkbox",
          "id": "viewall",
          "label": "Show View all Button",
          "default": true
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Tabbed Collections",
      "blocks": []
    }
  ]
}
{% endschema %}