<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Gallery</title>
    <link type="text/css" rel="stylesheet" href="/style.css"/>
    <link type="text/css" rel="stylesheet" href="/lightgallery-bundle.min.css"/>
</head>
<body>
<div id="lightgallery">
    <% items.forEach(item => {
    if (item.video) { %>
        <a data-video='<%- item.video %>'>
            <img alt="" src="<%- item.thumbnailUrl %>"/>
            <div class="play-icon"></div>
        </a>
    <% } else { %>
        <a href="<%- item.originalUrl %>">
            <img alt="" src="<%- item.thumbnailUrl %>"/>
        </a>
    <% }
    }) %>
</div>
<script src="/lightgallery.min.js"></script>
<script src="/lg-fullscreen.min.js"></script>
<script src="/lg-thumbnail.min.js"></script>
<script src="/lg-video.min.js"></script>
<script src="/lg-zoom.min.js"></script>
<script type="text/javascript">
  lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail, lgVideo, lgFullscreen],
    licenseKey: '0000-0000-000-0000',
    speed: 500
  })
  <% if (openItem) { %>
  const openItem = <%- openItem %>
  const thumbs = document.querySelectorAll('#lightgallery a')
  if (thumbs.length >= openItem) {
    thumbs[openItem - 1].click()
  }
  <% } %>
</script>
</body>
</html>