<!DOCTYPE html>
<html>

  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, user-scalable=no" />
      <title>{{ album.name }}</title>
      <link rel="stylesheet" href="/static/reset.css" />
      <link rel="stylesheet" href="/static/lightgallery.min.css" />
      <link rel="stylesheet" href="/static/style.css" />
      <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />      
  </head>

  <body>
    

    <div id="container">

      <!--
        Gallery title
      -->
      <header>
        <h1><a href="">{{ album.name }}</a></h1>
      </header>
    
      <!--
        Breadcrumbs of parent albums
      -->
      <nav id="breadcrumbs" class="breadcrumbs">
        {% for crumb in album.crumbs %}
          <a class="breadcrumb-item" href="/{{ crumb.url }}">{{ crumb.name }}</a>
          {% if not loop.last %}
          &nbsp;/&nbsp;
          {% endif %}
        {% endfor %}
      </nav>

      <!--
        Nested albums, if any
      -->
      <div id="albums">
        {% for album in album.albums %}
        <a href="/{{ album.url }}" style="background-image: url('/{{ album.image }}')">
          <div class="info">
            <h3>{{ album.name }}</h3>
            <div class="summary">{{ album.size }} items</div>
          </div>
        </a>
        {% endfor %}
      </div>

      <!-- Pagination -->
      {% if album.thumbs | length %}
      <nav id="pagination" class="breadcrumbs">
        {% for page in album.pagination %}
          <a href="/{{ page.url }}" class="breadcrumb-item {{ page.current }}">{{ page.page }}</a>
        {% endfor %}
      </nav>  
      {% endif %}
    
      <!--
        All photos and videos
      -->
      <ul id="media" class="clearfix">
        {% for thumb in album.thumbs %}
        <li data-src="/{{ thumb.large }}" data-download-url="/{{ thumb.full }}" data-sub-html="{{ thumb.name }}">
          <a href="/{{ thumb.large }}" data-download-url="/{{ thumb.full }}" data-sub-html="{{ thumb.name }}">
            <img src="/{{ thumb.small }}" width="{{ thumb.width }}" height="{{ thumb.height }}">
          </a>
        </li>
        {% endfor %}
      </ul>

      <!-- Pagination -->
      {% if album.thumbs | length %}
      <nav id="pagination" class="breadcrumbs breadcrumbs-bottom">
        {% for page in album.pagination %}
          <a href="/{{ page.url }}" class="breadcrumb-item {{ page.current }}">{{ page.page }}</a>
        {% endfor %}
      </nav>
      {% endif %}
      
    </div>
  
    <!-- jQuery -->
    <script src="/static/jquery.min.js"></script>
    <!-- LightGallery -->
    <script src="/static/lightgallery.min.js"></script>

    <script>
      $(document).ready(function() {

        $("#media").lightGallery({
          // download: false,
          // currentPagerPosition: 'middle',
          speed: 0,
          toogleThumb: false,
          // hideBarsDelay: 3600000,
          backdropDuration: 0,
          // thumbMargin: 11,
          slideEndAnimatoin: false,
          startClass:''
        });

      });
    </script>

  </body>

</html>