---
permalink: /gallery.html
title: Gallery
layout: empty
---

<div class="wrapper">
  <div class="slideshow">
    <img alt="Photo" src="/static/gallery/{{ photos.photos[0] }}">
  </div>
  <div class="controls">
    <button id="prev"><img src="/static/prev.svg" class="control" alt="Previous photo"></button>
    <button id="next"><img src="/static/next.svg" class="control" alt="Next photo"></button>
  </div>
</div>

<script>
    const img = document.querySelector('.slideshow > img');
    const photos = [
        {% for i in photos.photos %}
          '{{ i }}',
        {% endfor %}
    ];

    let i = 1;

    function next() {
        img.src = `/static/gallery/${photos[i++]}`;
        if (i >= photos.length) {
            i = 0;
        }
    }

    function prev() {
        img.src = `/static/gallery/${photos[i--]}`;
        if (i < 0) {
            i = photos.length-1;
        }
    }

    document.querySelector('#next').addEventListener('click', next);
    document.querySelector('#prev').addEventListener('click', prev);
</script>
