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

{% block title %} Lucie Sassiat Photography | Portfolio {% endblock %}

{% block body %}
    <div
            class="button-group filters-button-group"
            data-aos="fade" data-aos-delay="500"
    >
        <button class="filter-button is-checked" data-filter="*">
            Show all
        </button>

        <button class="filter-button" data-filter=".commercial">
            Commercial
        </button>

        <button class="filter-button" data-filter=".editorial">
            Editorial
        </button>

        <button class="filter-button" data-filter=".transition">
            Portraits
        </button>

        <button class="filter-button" data-filter=".transition">
            Personal
        </button>
    </div>

    <div class="grid" data-aos="fade" data-aos-delay="500">
        <div class="gutter-sizer"></div>
        <div class="grid-sizer"></div>


        <!-- color-walk-with-me_flanelle-magazine (1) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/color-walk-with-me_flanelle-magazine/lucie-sassiat-cwwm-fm-3.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'color-walk-with-me_flanelle-magazine'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Color walk with me. - Flanelle Magazine</h3>
                    </div>
                </div>
            </a>
        </div>


        <!-- Histoire d'or (2) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset("images/commercial/histoire-d'or/lucie-sassiat-histoire-or-1.jpg") }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'histoire-d\'or'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Histoire d'Or</h3>

                    </div>
                </div>
            </a>
        </div>


        <!-- BOADICEE - SCHöN MAGAZINE (3) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/schön-magazine_boadicee/lucie-sassiat-boadicee-schon-magazine-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'schön-magazine_boadicee'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>BOADICEE - SCHöN MAGAZINE</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- belisama-saprisit-mag (4) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/belisama-saprisit-mag/lucie-sassiat-belisama-2.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'belisama-saprisit-mag'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>BELISAMA - Sapristi Magazine</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- Belle de Crécy (5) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/belle-de-crecy/lucie-sassiat-belle-de-cercy-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'belle-de-crecy'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Belle de Crécy</h3>
                        
                    </div>
                </div>
            </a>
        </div>

        <!-- the-hours-duel-magazine (6) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/the-hours-duel-magazine/lucie-sassiat-the-hours-duel-magazine-2.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'the-hours-duel-magazine'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>The hours - Duel Magazine</h3>
                    </div>
                </div>
            </a>
        </div>

        <!-- Tsillandia - Flanelle Magazine (7) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/tsillandia_flanelle-magazine/lucie-sassiat-tsillandia-fm-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'tsillandia_flanelle-magazine'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Tsillandia - Flanelle Magazine</h3>
                    </div>
                </div>
            </a>
        </div>


        <!-- Rocks&Gold - Alice Magazine (8) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/rocks-&-gold_alice-magazine/lucie-sassiat-rocks-gold-alice-magazine-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'rocks-&-gold_alice-magazine'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Rocks&Gold - Alice Magazine</h3>
                    </div>
                </div>
            </a>
        </div>

        <!-- claude-emmanuelle-sapristi-mag (9) -->
        <div
                class="grid-item transition editorial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/editorial/claude-emmanuelle-sapristi-mag/lucie-sassiat-claud-m-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'editorial', name: 'claude-emmanuelle-sapristi-mag'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Claude Emmanuelle - SAPRISTI MAG</h3>

                    </div>
                </div>
            </a>
        </div>


        <!-- chloe-stora (10) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/chloe-stora/lucie-sassiat-chloe-stora-5.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'chloe-stora'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>chloé Stora</h3>

                    </div>
                </div>
            </a>
        </div>


        <!-- reebook-courir-lro (11) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/reebook-courir-lro/lucie-sassiat-reeboc-courrir-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'reebook-courir-lro'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>REEBOK x COURIR x LRO</h3>

                    </div>
                </div>
            </a>
        </div>


        <!-- Koshka Paris (12) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/koshka-paris/lucie-sassiat-koshka-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'koshka-paris'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Koshka Paris</h3>

                    </div>
                </div>
            </a>
        </div>


        <!-- Charles Jourdan - Pool Party (13) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/charles-jourdan_pool-party/lucie-sassiat-charles-jourdan-2.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'charles-jourdan_pool-party'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Charles Jourdan - Pool Party</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- esquisse-lingerie (14) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/esquisse-lingerie/lucie-sassiat-esquisse-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'esquisse-lingerie'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>ESQUISSE - lingerie</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- CHARLES JOURDAN - Hotel Room (15) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/charles-jourdan-hotel-room/lucie-sassiat-charles-jourdan-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'charles-jourdan-hotel-room'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>CHARLES JOURDAN - Hotel Room</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- body-and-clyde (16) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/body-and-clyde/lucie-sassiat-body-and-clyde-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'body-and-clyde'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Body and Clyde</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- les-recuperables (18) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/les-recuperables/lucie-sassiat-les-recuperables-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'les-recuperables'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Les Récupérables</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- aigle -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/aigle/lucie-sassiat-aigle-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'aigle'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Aigle</h3>

                    </div>
                </div>
            </a>
        </div>

        <!-- paul-gisele (21) -->
        <div
                class="grid-item transition commercial"
                data-category="transition"
        >
            <img
                    alt=""
                    class="img-responsive"
                    src="{{ asset('images/commercial/paul-gisele/lucie-sassiat-paul-gisele-1.jpg') }}"
            />
            <a
                    class="project-description"
                    href="{{ path('gallery', {type: 'commercial', name: 'paul-gisele'}) }}"
            >
                <div class="project-text-holder">
                    <div class="project-text-inner">
                        <h3>Paul Gisèle</h3>

                    </div>
                </div>
            </a>
        </div>

    </div>

    <script>
        var $grid = $(".grid").isotope({
            itemSelector: ".grid-item",
            percentPosition: true,
            masonry: {
                // use outer width of grid-sizer for columnWidth
                columnWidth: ".grid-sizer",
                gutter: ".gutter-sizer",
            },
        });
        // filter functions
        var filterFns = {
            // show if number is greater than 50
            numberGreaterThan50: function () {
                var number = $(this).find(".number").text();
                return parseInt(number, 10) > 50;
            },
            // show if name ends with -ium
            ium: function () {
                var name = $(this).find(".name").text();
                return name.match(/ium$/);
            },
        };
        // bind filter button click
        $(".filters-button-group").on("click", "button", function () {
            var filterValue = $(this).attr("data-filter");
            // use filterFn if matches value
            filterValue = filterFns[filterValue] || filterValue;
            $grid.isotope({ filter: filterValue });
        });
        // change is-checked class on buttons
        $(".button-group").each(function (i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on("click", "button", function () {
                $buttonGroup.find(".is-checked").removeClass("is-checked");
                $(this).addClass("is-checked");
            });
        });
        // Initialize isotope library on the .grid element
        // var $grid = $(".image-gallery").isotope({
        // 	itemSelector: ".item",
        // 	layoutMode: "fitRows",
        // });

        console.log($grid);

        // Filter elements based on button clicks
        // $(".controls").on("click", "button", function () {
        // 	var filterValue = $(this).attr("data-filter");
        // 	$grid.isotope({ filter: filterValue });
        // });

        // Highlight the selected button
        // $(".button").on("click", function () {
        // 	$(".button").removeClass("is-checked");
        // 	$(this).addClass("is-checked");
        // });
        // $(function () {
        // 	// Masonry Grid
        // 	$(".grid").isotope({
        // 		filter: "*",
        // 		// itemSelector: '.grid-item',
        // 		masonry: {
        // 			columnWidth: 180,
        // 			fitWidth: true, // When enabled, you can center the container with CSS.
        // 			gutter: 10,
        // 		},
        // 		// layoutMode: 'fitRows'
        // 	});

        // 	$(".filter a").click(function () {
        // 		$(".filter .current").removeClass("current");
        // 		$(this).addClass("current");

        // 		var selector = $(this).data("filter");
        // 		$(".grid").isotope({
        // 			filter: selector,
        // 		});
        // 		return false;
        // 	});
        // });
    </script>
{% endblock %}