{% load wagtailcore_tags wagtailimages_tags coderedcms_tags %}
{% get_pictures self.collection.id as pictures %}
{% generate_random_id as modal_id %}
<section class="{{self.settings.custom_css_class}}" {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{%endif %}>
  <div class="row">
    {% for picture in pictures %}
    {% image picture fill-800x450 format-webp as picture_image %}
    {% image picture max-1600x1600 format-webp as original_image %}
    <div class="col-sm-6 col-md-4 col-lg-3 my-3">
      <a href="#" class="lightbox-preview" data-bs-toggle="modal" data-bs-target="#modal-{{modal_id}}">
        <img class="img-thumbnail w-100" src="{{picture_image.url}}" data-original-src="{{original_image.url}}"
          alt="{{picture_image.image.title}}" title="{{picture_image.image.title}}">
      </a>
    </div>
    {% endfor %}
  </div>
  <div id="modal-{{modal_id}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lightbox">
      <div class="modal-body">
        <img src="" class="img-fluid" alt="">
      </div>
    </div>
  </div>
</section>
