{
  let scriptID = 'js-sneak-peek-oct-2021';
    let data = {
      title: 'October 2021 Edition',
    text: 'We’ll jump through hoops to bring you our latest collection of true gold earrings. Crafted from solid 22 karat gold and polished to a high gleam, this family of seven hoop earrings comes in sizes that range from extra large to micro. That means that there’s a solid gold Hoop Earring for everyone and any occasion — provided, of course, that you love a good hoop. Want to know more about upcoming launches? Join our mailing list (the AUList) to receive the full scoop about new arrivals!',
      slides: [
        {
          image: '/content/revamp/sneak-peek/oct-2021/Auvere_2021_EcomStills_Earring_Hoop_0590.png',
          textColor: 'black',
          formPosition: 'form-right',
          customClass: 'oct2021-first',
          productName: 'THE HOOP EARRING',
          productKarats: '22 karat gold',
          productCollection: 'Celestial Collection',
        },
        {
          image: '/content/revamp/sneak-peek/oct-2021/Sneak-Peek.jpg',
          textColor: 'black',
          formPosition: 'form-left',
          customClass: 'oct2021-second',
          productName: 'THE HOOP EARRING',
          productKarats: '22 karat gold',
          productCollection: 'Celestial Collection',
        },
    ],
};
  
   let generateHTML = _.template(`
  <div class="c-page-header c-page-header--sneak-peek">
  <h1 class="c-page-title">Sneak peek!</h1>
  <h3>Preview select new pieces coming soon</h3>
  <div class="c-page-subheader-content">
    <h4><%= title %></h4>
    <p><%= text %></p>
  </div>
  </div>
  <div>
    <div class="c-sneak-peek-images js-sneak-peek-images-container sneak-peek-december2020">
      <div class="c-sneak-peek-slider js-sneak-peek-slider">
        <% _.forEach(slides, ({image, textColor, formPosition, customClass, productName, productKarats, productCollection}) => { %>
        <div class="c-sneak-peek-slider__single">
          <div class="c-sneak-peek-slider__img <%= customClass %>"><img src="<%= image %>" alt="" />
            <div class="c-sneak-peek-form u-hidden-mobile <%= formPosition %>" style="top: calc(50% - 3rem)">
              <div class="c-sneak-peek-form__text">
                <p class="<%= textColor %>">Be the first to know about our monthly drops</p>
              </div>
              <div class="c-form-group c-form-group--inline">
                <div class="klaviyo-form-VuDuji" style="width:100%"></div>
              </div>
            </div>
            <div class="c-sneak-peek-slider__bottom" style="background-color: white; height: 100%; padding: 0.01rem">
              <h2 class="c-page-title"><%= productName %></h2>
              <span><%= productKarats %></span>
              <p><%= productCollection %></p>
            </div>
          </div>
        </div>
        <% }) %>
      </div>
    </div>
  </div>
`);
  
  
  
  
    // NOTE: Code below this should never have to be changed
  
  let html = generateHTML(data);
document.querySelector('#' + scriptID).outerHTML = html;


setTimeout(() => {
  let prevArrow = document.querySelector('.slider-arrow-left-js');
  let nextArrow = document.querySelector('.slider-arrow-right-js');
  prevArrow.classList.remove('hidden');
  nextArrow.classList.remove('hidden');

  let sneakPeekImagesContainers = document.querySelectorAll('.js-sneak-peek-images-container');
  [].forEach.call(sneakPeekImagesContainers, sneakPeekImagesContainer => {
  let dummyPrev = document.createElement('span');
  sneakPeekImagesContainer.insertBefore(dummyPrev, sneakPeekImagesContainer.firstChild);
  dummyPrev.outerHTML = prevArrow.outerHTML;

  let dummyNext = document.createElement('span');
  sneakPeekImagesContainer.appendChild(dummyNext);
  dummyNext.outerHTML = nextArrow.outerHTML;

  setTimeout(() => {
    let slider = sneakPeekImagesContainer.querySelector('.js-sneak-peek-slider:not(.slick-initialized)');
    $(slider).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: $(slider).parent().find(".slider-arrow-right-js"),
    prevArrow: $(slider).parent().find(".slider-arrow-left-js"),
    responsive: [
      {
      breakpoint: 992,
      settings: {
        arrows: false,
        dots: true
      }
      }
    ]
    });
  }, 100);
  });

  prevArrow.classList.add('hidden');
  nextArrow.classList.add('hidden');
}, 100);
}
//