<!doctype html>
<html lang="{{ settings.html_language }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>{{ album.title|striptags }} - {{ settings.title }}</title>
    <meta name="description" content="">
    <meta name="author" content="{{ album.author }}">
    <meta name="viewport" content="width=device-width">
    {% include 'default_head.html' %}

{% if album.medias %}
    <link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
    <script type="module">
    import PhotoSwipeLightbox from '{{ theme.url }}/photoswipe-lightbox.esm.min.js';
    import PhotoSwipe from '{{ theme.url }}/photoswipe.esm.min.js';
    import PhotoSwipeDynamicCaption from '{{ theme.url }}/photoswipe-dynamic-caption-plugin.esm.min.js';
    import PhotoSwipeFullscreen from '{{ theme.url }}/photoswipe-fullscreen.esm.min.js';
    import PhotoSwipeVideoPlugin from '{{ theme.url }}/photoswipe-video-plugin.esm.min.js';

    const lightbox = new PhotoSwipeLightbox({
      gallery: '.gallery',
      children: '.thumbnail',
      pswpModule: PhotoSwipe
    });
    const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {type: 'auto'});
    const fullscreenPlugin = new PhotoSwipeFullscreen(lightbox);
    const videoPlugin = new PhotoSwipeVideoPlugin(lightbox, {autoplay: true});

    lightbox.on('uiRegister', function() {
      lightbox.pswp.ui.registerElement({
        name: 'download-button',
        order: 8,
        isButton: true,
        tagName: 'a',
        html: {
          isCustomSVG: true,
          inner: '<path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" id="pswp__icn-download"/>',
          outlineID: 'pswp__icn-download'
        },
        onInit: (el, pswp) => {
          el.setAttribute('download', '');
          el.setAttribute('target', '_blank');
          el.setAttribute('rel', 'noopener');
          pswp.on('change', () => {
            if (pswp.currSlide.data.element.children[0].dataset.big) {
              el.href = pswp.currSlide.data.element.children[0].dataset.big;
            } else {
              el.href = pswp.currSlide.data.src;
            }
          });
        }
      });
    });

    lightbox.init();
    </script>
{% endif %}

    {% block extra_head %}{% endblock extra_head %}
    <link rel="stylesheet" href="{{ theme.url }}/styles.css">
    {% if user_css %}
    <link rel="stylesheet" href="{{ theme.url }}/{{ user_css }}">
    {% endif %}
    {% include 'analytics.html' %}
  </head>
  <body>
    {% include 'decrypt.html' %}
    {% include 'gtm.html' %}
    <div class="container">
      <h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>

      {% include 'links.html' %}

      <div class="content">
        {% include 'breadcrumb.html' %}
        {% block content %}{% endblock %}

        {% if album.description %}
        <div id="description" class="row">
        {{ album.description }}
        </div>
        {% endif %}
      </div>

      {% include 'footer.html' %}
      {% block extra_footer %}{% endblock %}
  </div>
  {% include 'piwik.html' %}
  </body>
</html>
