{% extends 'components/single.twig' %}
{% block figure %}
{% endblock %}
{% block post_content %}
    {% set index = -1 %}
    {% for row in photos|batch(4) %}
        <div class="row">
            {% for photo in row %}
                {% set index = index + 1 %}
                <div class="medium-3 small-6 columns {% if loop.last %} end {% endif %}">
                    <img class="thumbnail open-photoswipe" src="{{ photo.sizes.thumbnail }}" data-index={{ index }}>
                </div>
            {% endfor %}
        </div>
    {% endfor %}
    {% include 'components/gallery/photoswipe.twig' %}
    <script type="text/javascript">
        var items = [
            {% for photo in photos %}
            {
                src: '{{ photo.url }}',
                w: {{ photo.width }},
                h: {{ photo.height }}
            },
            {% endfor %}
        ];

        window.onload = function (e) {
            var pswpElement = document.querySelectorAll('.pswp')[0];

            var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items);

            gallery.init();

            jQuery('img.open-photoswipe').click(function () {
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: jQuery(this).data('index')
                });
                gallery.init();
            })
        }
    </script>
{% endblock %}