<article class="screenshots__wrapper">
    <header>
        <h1 id="screenshots">
            Hi-res imagery everywhere you need it
        </h1>
        <aside>
            The <%= site.site_name %> app is currently available for iOS and Android, with desktop support added later.
            The app supports portrait mode, text-scaling, and it includes 3 color themes.
        </aside>
    </header>
    <section>
    <div class="glide">
      <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides">
          <% collections.screenshotThumbnails.forEach((screenshot, index)=> { %>
            <% if (screenshot.includes('--en')) { %>
              <li class="glide__slide">
                <img src="<%= screenshot %>" alt="" onclick="zoomScreenshot('<%= screenshot %>')" />
              </li>
            <% } %> 
          <% }) %>
        </ul>
      </div>
    </div>
    <div class="hires">
      <% collections.screenshotHires.forEach((screenshot, index)=> { %>
        <% if (screenshot.includes('--en')) { %>
          <div class="hires-details" data="<%= screenshot %>" onclick="clearScreenshotSelection()">
            <img src="<%= screenshot %>" alt="" />
            <caption></caption>
          </div>
        <% } %> 
      <% }) %>
    </div>
  </section>
</article>

<script>

  function zoomScreenshot(slug) {

      let thisImage = document.querySelector('[data="' + slug.replace('resized.','') + '"]');

      thisImage.classList.add('hires-details--selected');

      let allIconImages = document.querySelectorAll('.hires-details');

      for (let elem of allIconImages) {
          if (elem !== thisImage) {
              elem.classList.remove('hires-details--selected')
          }
      }

  }

  function clearScreenshotSelection() {
    let allIconImages = document.querySelectorAll('.hires-details');

    for (let elem of allIconImages) {
      elem.classList.remove('hires-details--selected')
    }
  }


</script>
