{
  let scriptID = 'js-sneak-peek-sep-2021';
    let data = {
      title: 'September 2021 Edition',
    text: 'The focus is on pure 24 karat gold during the month of September. Joining our gemstone and high karat gold mix is our new Byzantium 24K Ring Polished/Turquoise. This beauty is handcrafted from solid and pure 24 karat gold as well as five gorgeous turquoise stones that will make you want to dive in, fingers first. 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/sep-2021/Auvere_2021_EcomStills_Ring_Byzantium_24K_Turquoise_1587.png',
        textColor: 'black',
        formPosition: 'form-left',
        customClass: 'sep2021-first',
        productName: 'BYZANTIUM 24K RING POLISHED/TURQUOISE',
        productKarats: '24 karat gold with 5 turquoise stones',
        productCollection: 'Sculptura Collection',
      },
      {
        image: '/content/revamp/sneak-peek/sep-2021/Sneak-Peek.jpg',
        textColor: 'black',
        formPosition: 'form-right',
        customClass: 'sep2021-second',
        productName: 'BYZANTIUM 24K RING POLISHED/TURQUOISE',
        productKarats: '24 karat gold with 5 turquoise stones',
        productCollection: 'Sculptura 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);
}
//