{% for photo in eventPhotos %}
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4 gallery-item" data-photo-id="{{ photo.id }}">
        <div class="gallery-code" data-glightbox="title: {{ photo.id }} - Photo at Grateful Events; description: Download or report this photo; href: {{ photo.photo|default(photo.thumbnail) }}">
            <img src="{{ photo.thumbnail }}" alt="Event Photo {{ photo.id }}" class="img-fluid" data-full="{{ photo.photo|default(photo.thumbnail) }}">
        </div>
        <div class="desc-{{ photo.id }} row me-0 ms-0" style="display: none;">
            <div class="col-xs-6">
                <a class="btn btn-primary btn-full" href="{{ photo.photo|default(photo.thumbnail) }}">Download Photo</a>
            </div>
            <div class="col-xs-6" style="padding-top: 50px;">
                <a href="#" class="btn btn-danger btn-full reportPhoto" data-reportPhotoId="{{ photo.id }}">Report</a>
            </div>
        </div>
    </div>
{% endfor %}