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

{% block title %} Lucie Sassiat Photography | Selected Work {% endblock %}

{% block body %}

    <ul class="masonry__gallery" data-aos="fade" data-aos-delay="500">
        {% for image in images %}

            <li class="masonry_gallery_item">
                <a
                        href="{{ asset('images/selected-work/' ~ image) }}"
                        data-fslightbox="gallery"
                >
                    <img class="masonry_gallery_img"
                         src="{{ asset('images/selected-work/' ~ image) }}"
                         alt="A Toyota Previa covered in graffiti" loading="lazy">
                </a>
            </li>

        {% endfor %}
        <!--  Adding an empty <li class="masonry_gallery_item"> here so the final photo doesn't stretch like crazy. Try removing it and see what happens!  -->
        <li class="masonry_gallery_item"></li>
    </ul>



    <!--
    <div class="container-fluid" data-aos="fade" data-aos-delay="500">
        <div class="row">
            {% for image in images %}
                <div class="col-lg-2">
                    <div class="image-wrap-2">
                        <div class="image-info">
                            <h2 class="mb-3">Nature</h2>
                            <a href="single.html" class="btn btn-outline-white py-2 px-4">More Photos</a>
                        </div>
                        <img src="{{ asset('images/selected-work/' ~ image) }}"
                             alt="Image" class="img-fluid">
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    -->

{% endblock %}