<div class="icons">
  <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
                          title="Fullscreen" alt="Fullscreen (f)" /></a>
</div>
{% include 'map.html' %}
{% if album.medias %}
<div id="gallery"></div>
{% endif %}

{% include 'download_zip.html' %}

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

{% block late_js %}
  {% if album.medias %}
    {% macro img_description(media) -%}
      {%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
      {# clean up tags and whitespace, including newlines, in the description #}
      {%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
      {%- if media.exif -%}
        <div class='film-meta'>
        {%- if media.exif.iso -%}<abbr title='film speed'>{{ media.exif.iso }}</abbr> {%- endif -%}
        {%- if media.exif.exposure -%}<abbr title='exposure'>{{ media.exif.exposure }}</abbr> {%- endif -%}
        {%- if media.exif.fstop -%}<abbr title='aperture'>{{ media.exif.fstop }}</abbr> {%- endif -%}
        {%- if media.exif.focal -%}<abbr title='focal length'>{{ media.exif.focal }}</abbr> {%- endif -%}
        </div>
        {%- if media.exif.gps -%}
          <a title='location' href='https://www.openstreetmap.org/?mlat={{ media.exif.gps.lat }}&amp;mlon={{ media.exif.gps.lon}}&amp;zoom=12&amp;layers=M' target='_blank' class='map' >{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }}{{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }}</a>
        {%- endif -%}
        {%- if media.exif.Make or media.exif.Model -%}
          <abbr title='camera make and model'>{{ media.exif.Make }} {{ media.exif.Model }}</abbr>
        {%- endif -%}
        {%- if media.exif.datetime -%}
          <abbr title='date'>{{ media.exif.datetime }}</abbr>
        {%- endif -%}
      {% endif %}
    {%- endmacro %}

    <script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
    <script src="{{ theme.url }}/galleria.min.js"></script>
    <script src="{{ theme.url }}/themes/{{ settings.galleria_theme }}/galleria.{{ settings.galleria_theme }}.min.js"></script>
    <script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
    <script>
    var data = [
      {% for media in album.medias -%}
      {
        title: "{{ media.title }}",
        description: "{{ img_description(media) | e }}",
        thumb: "{{ media.thumbnail }}",
        {% if media.big %}
        big: "{{ media.big_url }}",
        {% endif %}
        {% if media.type == "image" %}
        image: "{{ media.url }}"
        {% endif %}
        {% if media.type == "video" %}
        image: "{{ theme.url }}/img/empty.png",
        layer: "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"
        {% endif %}
      },
      {% endfor %}
    ]

    Galleria.ready(function() {
        /*
        load thumbnails after gallery setup, and download has started
        for the main images, but before the loading of map tiles starts
        in the background. This ensures visible elements are prioritised
        over non-visible elements

        The choice to lazy load thumbnails in batches of 50 was not made
        scientifically. Other numbers may yield better performance.
        */
        this.lazyLoadChunks( 50 );

        this.attachKeyboard({
            right: this.next,
            left: this.prev,
            /* Toggle fullscreen display on press of 'f' key */
            0x46: this.toggleFullscreen,
        });

        var gallery = this;
        $('#fullscreen').click(function() {
          gallery.toggleFullscreen();
        });

        $('.icons').appendTo(this.$('container'));
    });

    Galleria.configure({
        imageCrop: false,
        transition: "fade",
        thumbnails: "lazy"
    });
    Galleria.run("#gallery", {dataSource: data});

    </script>
  {% endif %}
{% endblock %}
