{
  let scriptID = 'js-sneak-peek-aug-2021';
    let data = {
      title: 'Aug 2021 Edition',
    text: 'We are embracing the hottest month of the year by introducing the warmth of pure 24 karat gold. Not only are we adding more 24 karat gold rings to our line-up, we are offering these new pieces in a hammered finish. Why do we love hammered gold? Because, from our perspective, each piece is a form of art. To achieve this finish, we apply an ancient technique to a rare metal to create a modern and unique look. 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/aug-2021/Auvere_2021_EcomStills_Ring_Xanthe_24K_Hammered_1638.png',
        textColor: 'black',
        formPosition: 'form-left',
        customClass: 'aug2021-first',
        productName: 'XANTHE 24K RING HAMMERED',
        productKarats: '24 karat gold',
        productCollection: 'Arignote Collection',
      },
      {
        image: '/content/revamp/sneak-peek/aug-2021/Sneak-Peek-2.jpg',
        textColor: 'black',
        formPosition: 'form-left',
        customClass: 'aug2021-second',
        productName: 'XANTHE 24K RING HAMMERED',
        productKarats: '24 karat gold',
        productCollection: 'Arignote Collection',
      },
      {
        image: '/content/revamp/sneak-peek/aug-2021/Sneak-Peek.jpg',
        textColor: 'black',
        formPosition: 'form-left',
        customClass: 'aug2021-third',
        productName: 'XANTHE 24K RING HAMMERED',
        productKarats: '24 karat gold',
        productCollection: 'Arignote 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);
}
//