{
  let scriptID = 'js-sneak-peek-june-2021';
    let data = {
      title: 'June 2021 Edition',
    text: 'The definition of an amulet is <i>“a piece of jewelry thought to give protection against evil, danger, or disease.”</i> Our satin finished Captured Cone Amulets are not nearly so powerful but, handcrafted in solid 22 karat gold, they certainly hold their own in terms of value and beauty. 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/june-2021/captureconeamulet_necklace_satin_large_03.png',
        textColor: 'black',
        formPosition: 'form-right',
        customClass: 'june2021-first',
        productName: 'CAPTURED CONE AMULET & CHAIN SATIN/LARGE',
        productKarats: '22 karat gold',
        productCollection: 'Arignote Collection',
      },
      {
        image: '/content/revamp/sneak-peek/june-2021/Sneak-Peek.jpg',
        textColor: 'black',
        formPosition: 'form-left',
        customClass: 'june2021-second',
        productName: 'CAPTURED CONE AMULET & CHAIN SATIN/LARGE',
        productKarats: '22 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);
}
//