<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  {%- if webmanifest %}
  <link rel="manifest" href="/.static/manifest.json">
  {%- endif %}
  <link rel="icon" type="image/x-icon" href="{{ favicon }}">
  <link rel="stylesheet" href="{{ stylesheet }}">
  {%- if theme %}
  <link rel="stylesheet" href="{{ theme }}">
  {%- endif %}
  {%- if images %}
  <link rel="stylesheet" href="{{ root }}.static/pswp/photoswipe.css">
  <link rel="stylesheet" href="{{ root }}.static/pswp/default-skin/default-skin.css">
  <script src="{{ root }}.static/pswp/photoswipe.min.js"></script>
  <script src="{{ root }}.static/pswp/photoswipe-ui-default.min.js"></script>
  {%- endif %}
</head>

<body>
  <div class="header">
    <ul class="navbar">
      <li><a href="{{ root }}">Home</a></li>
      {%- if parent %}
      <li><a href="{{ parent }}">Parent Directory</a></li>
      {%- endif %}
      {%- if info %}
      <li class="tooltip"><a>Info</a><span class="tooltiptext">
          {%- for infoline in info -%}
          {{ infoline }}<br />
          {%- endfor -%}
        </span></li>
      {%- endif -%}
      <li style="position: absolute; left: 50%; transform: translateX(-50%);"><span class="header">{{ header }}</span></li>
      {%- if license %}
      <li style="float:right"><a href="{{ license.url }}" target="_blank">License</a></li>
      {%- endif %}
    </ul>
    {% if subdirectories %}
    <div class="folders">
      {%- for subdirectory in subdirectories %}
      <figure>
        <a href="{{ subdirectory.url }}"><img /></a>
        <figcaption><a href="{{ subdirectory.url }}">{{ subdirectory.name }}</a></figcaption>
      </figure>
      {%- endfor %}
    </div>
    {%- endif %}
  </div>
  {% if images %}
  {%- set ns = namespace(count = 0) -%}
  <div class="row">
    {%- for imageblock in images %}
    <div class="column">
      {%- for image in imageblock %}
      <figure>
        <img src="{{ image.thumbnail }}" alt="{{ image.name }}" onclick="openSwipe({{ ns.count }})" />
        {%- set ns.count = ns.count + 1 %}
        <figcaption class="caption">{{ image.name }}
          {%- if image.tiff %}
          <a href="{{ image.tiff }}">TIFF</a>
          {%- endif %}
          {%- if image.raw %}
          <a href="{{ image.raw }}">RAW</a>
          {%- endif %}
        </figcaption>
      </figure>
      {%- endfor %}
    </div>
    {%- endfor %}
  </div>
  {%- endif %}
  {% if license %}
  {%- if 'CC' in license.type %}
  <div class="footer" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">
    {%- if license.type == 'CC0 1.0' %}
    <a property="dct:title" rel="cc:attributionURL" href="{{ root }}">{{ license.project }}</a> by <span property="cc:attributionName">{{ license.author }}</span> is marked with
    <a href="{{ license.url }}" target="_blank" rel="license noopener noreferrer" style="display: inline-block">CC0 1.0
      {%- for pic in license.pics %}
      <img style="height: 22px !important; margin-left: 3px; vertical-align: text-bottom" src="{{ pic }}" alt="" />
      {%- endfor %}
    </a>
    {%- else %}
    <a property="dct:title" rel="cc:attributionURL" href="{{ root }}">{{ license.project }}</a> by <span property="cc:attributionName">{{ license.author }}</span> is licensed under
    <a href="{{ license.url }}" target="_blank" rel="license noopener noreferrer" style="display: inline-block">{{ license.type }}
      {%- for pic in license.pics %}
      <img style="height: 22px !important; margin-left: 3px; vertical-align: text-bottom" src="{{ pic }}" alt="" />
      {%- endfor %}
    </a>
    {%- endif %}
    <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank">StaticGalleryBuilder</a></a> by <a href="https://github.com/greflm13"
        target="_blank">Flo Greistorfer</a>.</span>
  </div>
  {%- endif %}
  {%- else %}
  <div class="footer">
    <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank">StaticGalleryBuilder</a></a> by <a href="https://github.com/greflm13"
        target="_blank">Flo Greistorfer</a>.</span>
  </div>
  {%- endif %}
  {% if images %}
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
      <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
      </div>
      <div class="pswp__ui pswp__ui--hidden">
        <div class="pswp__top-bar">
          <div class="pswp__counter"></div>
          <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
          <button class="pswp__button pswp__button--share" title="Share"></button>
          <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
          <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
          <div class="pswp__preloader">
            <div class="pswp__preloader__icn">
              <div class="pswp__preloader__cut">
                <div class="pswp__preloader__donut"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
          <div class="pswp__share-tooltip"></div>
        </div>
        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
        </button>
        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
        </button>
        <div class="pswp__caption">
          <div class="pswp__caption__center"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var pswpElement = document.querySelectorAll('.pswp')[0];
    var items = [
      {%- for image in allimages %}
      { src: "{{ image.url }}", w: {{ image.width }}, h: {{ image.height }}, msrc: "{{ image.thumbnail }}" },
      {%- endfor %}
    ];
    function openSwipe(img) {
      // define options (if needed)
      var options = {
        // optionName: 'option value'
        index: img // start at first slide
      };
      var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
      gallery.init();
    }
    if (window.location.href.indexOf("pid=") > -1) {
      var pid = window.location.href.split('pid=')[1].split('#')[0];
      openSwipe(parseInt(pid));
    }
  </script>
  {%- endif %}
</body>

</html>