{% from 'description.html' import img_description %}
{% extends "base.html" %}

{% block extra_head %}
  <link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
  <script type="module">
  import PhotoSwipeLightbox from '/static/photoswipe-lightbox.esm.min.js';
  import PhotoSwipe from '/static/photoswipe.esm.min.js';
  import PhotoSwipeDynamicCaption from '/static/photoswipe-dynamic-caption-plugin.esm.min.js';
  import PhotoSwipeFullscreen from '/static/photoswipe-fullscreen.esm.min.js';
  import PhotoSwipeVideoPlugin from '/static/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>
{% endblock extra_head %}

{% block content %}
  {% include 'download_zip.html' %}
  {% include 'map.html' %}
  <div class="gallery">
    {% for media in album.medias %}
      {% if media.type == "image" %}
        <figure class="gallery__img--{{ "main" if loop.first else "secondary" }} thumbnail">
          <a href="{{ media.url }}"
             data-pswp-width="{{media.size.width}}"
             data-pswp-height="{{media.size.height}}"
             {%- if media.big -%}
             data-big="{{ media.big_url }}"
             {%- endif -%}
             >
             <img src="{{ media.thumbnail }}" alt="{{ media.url }}" />
          </a>
          <div class="pswp-caption-content">
            {{ img_description(media, with_big=False) }}
          </div>
          <figcaption>{{ media.title }} - {{ media.exif.datetime }}</figcaption>
        </figure>
      {% endif %}
      {% if media.type == "video" %}
        <figure class="gallery__img--secondary thumbnail" >
          <a href="{{ media.url }}"
             data-pswp-type="video"
             data-pswp-width="800"
             data-pswp-height="600">
            <img src="{{ media.thumbnail }}" alt="{{ media.url }}" />
          </a>
          <div class="pswp-caption-content">
            {{ img_description(media, with_big=False) }}
          </div>
          <figcaption>{{ media_title }}</figcaption>
        </figure>
      {% endif %}
    {% endfor %}
  </div>
{% endblock %}

{% block extra_footer %}
{% endblock %}
