{
  let scriptID = 'js-sneak-peek-dec-2021';
    let data = {
      title: 'December 2021 Edition',
    text: 'Ice in winter. That’s what we are selling. But only because diamonds look especially beautiful during the holiday season. In mid-December, look for the icy hot Diamond Cone Threader Earrings handcrafted from 22 karat gold with pave diamonds totaling .62 carats per pair. Light and easy to wear, this diamond encrusted threader earring is the epitome of cool. The Diamond Cone Threader Earrings may be worn as a pair or a single and may be counted on to elevate any look, whether casual or dressy. 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/december2021/1.png',
          textColor: 'black',
          formPosition: 'form-right',
          customClass: 'dec2021-first',
          productName: 'DIAMOND CONE THREADER EARRINGS',
          productKarats: '22 karat gold with pave diamonds totaling .62 carats',
          productCollection: `<a href="/arignote" >Arignote Collection</a>`,
      },
      {
          image: '/content/revamp/sneak-peek/december2021/2.jpg',
          textColor: 'black',
          formPosition: 'form-left',
          customClass: 'dec2021-second',
          productName: 'DIAMOND CONE THREADER EARRINGS',
          productKarats: '22 karat gold with pave diamonds totaling .62 carats',
          productCollection: `<a href="/arignote" >Arignote Collection</a>`,
      },
    ],
     
};
  
     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);
}
//