{% extends 'partials/base.html.twig' %}

{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}

{% set image_counter = 0 %}

{% block content %}
    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
        {% include 'partials/breadcrumbs.html.twig' %}
    {% endif %}
    <hr class="mb-4 mt-1">

    {{ page.content }}
    <div class="card-columns">
        {% for media_item in page.media.videos %}
            <div class="card">
                {{ media_item.html }}
            </div>
        {% endfor %}
    </div>
    <div class="card-columns">
        {% for media_item in page.media.images %}
            <div class="card" onclick="show_photoswipe({{ loop.index - 1 }})">
                {{ media_item.html }}
            </div>
        {% endfor %}
    </div>

    {{ dump (image_counter) }}

    {% include 'partials/photoswipe.html.twig' %}

    <script>
        let pswpElement = document.querySelectorAll('.pswp')[0];

        let items = [
            {% for media_item in page.media.images %}
                {
                    src: '{{ media_item.url }}',
                    w: {{ media_item.width }},
                    h: {{ media_item.height }}
                },
            {% endfor %}
        ];

        function show_photoswipe(start_index)
        {
            let options = {
                index: start_index,
                history: false,
            };

            let gallery = new PhotoSwipe( pswpElement, PhotoSwipeDefaultUI, items, options);
            gallery.init();
        }
    </script>
{% endblock %}