{
  let scriptID = 'js-sneak-peek-march-2020';
  let data = {
    title: 'March 2020 Edition',
    text: 'Will you be our Valentine? We are prepared to show our love in a gloriously golden way. Indeed, we are launching gifts galore, including golden hearts and bands of love, all handcrafted from 22 karat gold and embellished with starry diamonds. Scroll down to see what’s coming in February 2020. If you want to know more, join the AU/LIST to receive the full scoop about new arrivals and upcoming sales and promotions.',
    slides: [
     {
        image: 'https://cdn11.bigcommerce.com/s-fcxhsbjcrg/content/revamp/sneak-peek/may2020/AUV_SS19_LK21_2010.jpg',
        textColor: 'black',
        sliderTitle: 'Open heart pendant & chain',
        productLink: '/product/open-heart-pendant-chain/',
        karat: '22 karat gold with two diamonds',
        brand: 'Talisman Collection',
        brandLink: '/talisman/',
      },
     {
        image: 'https://cdn11.bigcommerce.com/s-fcxhsbjcrg/content/revamp/sneak-peek/may2020/colonnade_ring_polished_2.png',
        textColor: 'black',
       formPosition: 'form-right',
       sliderTitle: 'Open heart pendant & chain',
       productLink: '/product/open-heart-pendant-chain/',
       karat: '22 karat gold with two diamonds',
       brand: 'Talisman Collection',
       brandLink: '/talisman/',
      },
    {
        image: 'https://cdn11.bigcommerce.com/s-fcxhsbjcrg/content/revamp/sneak-peek/may2020/AUV_SS19_LK03_0356.jpg',
        textColor: 'white',
        sliderTitle: 'Brutalist 24K Signet Ring Satin',
        productLink: '/product/brutalist-24k-signet-ring-satin/',
        karat: '22 karat gold',
        brand: 'Sculptura Collection',
        brandLink: '/sculptura/',
      },
  {
        image: 'https://cdn11.bigcommerce.com/s-fcxhsbjcrg/content/revamp/sneak-peek/may2020/AUV_brutalist_ring_polished_01.png',
        textColor: 'black',
        formPosition: 'form-right',
        sliderTitle: 'Brutalist 24K Signet Ring Satin',
        productLink: '/product/brutalist-24k-signet-ring-satin/',
        karat: '22 karat gold',
        brand: 'Sculptura Collection',
        brandLink: '/sculptura/'
      },
    ],
  };

  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">
            <div class="c-sneak-peek-slider js-sneak-peek-slider">
                <% _.forEach(slides, ({image, textColor, formPosition, sliderTitle, productLink, karat, brand, brandLink}) => { %>
                  <div class="c-sneak-peek-slider__single">
                    <div class="c-sneak-peek-slider__img" style="height: auto;"><img src="<%= image %>" alt="" />
                        <div class="c-sneak-peek-form u-hidden-mobile <%= formPosition %>">
                            <div class="c-sneak-peek-form__text">
                                <p class="<%= textColor %>">Wait! There's more! Get on the au. list!</p>
                                <p class="<%= textColor %>">Be the first to know about our monthly drops</p>
                            </div>
                            <div class="c-form-group c-form-group--inline">
                                <form method="post" action="/subscribe.php">
                                  <input class="c-form-control <%= textColor %>" type="email" 
                                    name="nl_email" placeholder="Add your email to receive our 
                                    newsletter." value="" />
                                  <input type="hidden" name="action" value="subscribe">
                                  <input type="hidden" name="nl_first_name" value="bc">
                                  <input type="hidden" name="check" value="1">
                                  <button class="c-btn c-btn--primary u-gap-left" type="submit" 
                                    >Sign up</button>
                               </form>
                            </div>
                        </div>
                       <div class="c-sneak-peek-slider__bottom">
                          <h2 class="c-page-title"><a href="<%= productLink %>"><%= sliderTitle %></a></h2>
                         <span><%= karat %></span>
                         <p><a href="<%= brandLink %>"><%= brand %></a></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);
}
//