<!DOCTYPE html>
<html>

  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, user-scalable=no" />
      <title>{{gallery.title}} - {{album.title}}</title>
      <link rel="stylesheet" href="{{relative 'public/reset.css'}}" />
      <link rel="stylesheet" href="{{relative 'public/viewer.css'}}" />
      <link rel="stylesheet" href="{{relative 'public/font-awesome/css/font-awesome.min.css'}}">
      <link rel="stylesheet" href="{{relative 'public/light-gallery/css/lightgallery.css'}}" />
      <link rel="stylesheet" href="{{relative 'public/videojs/video-js.min.css'}}" />
      <link rel="stylesheet" href="{{relative 'public/style.css'}}" />
  </head>

  <body>

    {{> theme}}

    <!-- Video loader -->
    <div id="videos">
      {{#each album.files}}
        {{#if isVideo}}
          <div id="media{{id}}" style="display:none;">
            <video class="lg-video-object lg-html5 video-js vjs-default-skin vjs-big-play-centered"  poster="{{relative urls.large}}" preload="none" controls>
              <source src="{{relative urls.video}}" type="video/mp4" />
              Your browser does not support HTML5 video
            </video>
          </div>
        {{/if}}
      {{/each}}
    </div>

    <!-- jQuery -->
    <script src="{{relative 'public/jquery.min.js'}}"></script>
    <!-- VideoJS -->
    <script src="{{relative 'public/videojs/video.js'}}"></script>
    <!-- LightGallery -->
    <script src="{{relative 'public/light-gallery/js/lightgallery.js'}}"></script>
    <script src="{{relative 'public/light-gallery/js/lg-autoplay.js'}}"></script>
    <script src="{{relative 'public/light-gallery/js/lg-pager.js'}}"></script>
    <script src="{{relative 'public/light-gallery/js/lg-thumbnail.js'}}"></script>
    <script src="{{relative 'public/light-gallery/js/lg-video.js'}}"></script>

    <script>
      $(document).ready(function() {
        $("#media").lightGallery({
          thumbWidth: 80,
          controls: true,
          loop : false,
          download: true,
          counter: true,
          videojs: true
        });
      });
    </script>

    {{> analytics}}

  </body>

</html>
