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

{% block title %}Steve Krack{% endblock %}

{% block body %}

    <!--MAIN BODY-->
    {% if project.id == "c60d77a6-a3d0-11ed-8b2d-0242ac110006" %}
     <!--MAIN BODY-->
    <div class="container-fluid no-padd d-none d-md-block">
        <div class="row-fluid no-padd">
            <div class="scol-sm-12 no-padd">
                <div class="project-detail-fullscreen ">
                    <div class="project-detail-full-main slick-slider" data-key="1" data-arrows="1" data-autoplay="0"
                        data-speed="2500" data-autoplay-speed="6000" data-fade="1" data-for=".project-detail-full-thumb"
                        data-width="0" data-slides="1" style="width:100vw!important" >
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         <div class="project-detail-main-slide slick-slide">
                            <video autoplay loop playsinline muted class="videoSection" >
                                <source data-src="{{ asset('assets/video/gare.mp4' ) }}"  class="lazy" type="video/mp4" >
                            </video>
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo2 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo3 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo4 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                           <img data-src="{{ asset('assets/img/projects/' ~ project.photo5 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>


                       
             

                    </div>

                    <div class="project-detail-full-overlay">

                        <div class="pulse1"></div>
                        <div class="pulse2"></div>
                        <div class="icon"></div>
                    </div>

                    <div class="project-detail-full-thumb slick-slider" data-key="1" data-arrows="0" data-autoplay="0"
                        data-speed="1000" data-autoplay-speed="1000" data-for=".project-detail-full-main" data-width="0"
                        data-focus="1" data-slides="5">
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% for picture in project.addedPictures %}
                        <div class="project-detail-main-slide slick-slide">
                            <img width="1800" height="1417" data-src="{{ asset('assets/img/projects/' ~ picture.name ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% endfor %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo2 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo3 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo4 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo5 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        
                    </div>
                    <div class="project-detail-fullscreen-content">

                        {# <h6 class="project-detail-fullscreen-content-subtitle"> ENVIRONMENT</h6> #}

                        <p style="color:#fff!important;font-size:16px">{{ project.label }}</p>
                        {# 
                        <div class="project-detail-fullscreen-content-descr content" >
                            <p style="line-height: 14px;">{{ project.description }} </p>
                        </div> #}

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid no-padd d-md-none">
        <div class="row-fluid no-padd">
            <div class="col-sm-12 no-padd ">
                <div class="portfolio-slider-wrap full_showcase_slider showcase_slider ">
                    <div class="swiper-container" data-mouse="0" data-space="0" data-pagination-type="bullets"
                        data-mode="horizontal" data-autoplay="5000" data-loop="2" data-speed="1500" data-center="0"
                        data-responsive="responsive" data-slides-per-view="4" data-xs-slides="1,0"
                        data-sm-slides="2,0" data-md-slides="3,0" data-lg-slides="4,0">
                        <div class="project-detail-full-overlay" style="z-index:11"></div>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                            alt="seascape-villa image" class="s-img-switch">
                                    </span>

                                </div>

                            </div>

                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                       <video autoplay loop playsinline muted class="videoSection" >
                                            <source src="{{ asset('assets/video/gare.mp4' ) }}" type="video/mp4" >
                                        </video>
                                    </span>

                                </div>

                            </div>

                            {% if project.photo2 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo2 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if project.photo3 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo3 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if project.photo4 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo4 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if project.photo5 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo5 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% for picture in project.addedPictures %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ picture.name ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endfor %}


                        </div>
                        {# <div class="swiper-button-prev swiper-buttons"></div>
                        <div class="swiper-button-next swiper-buttons"></div> #}
                        <div class="project-detail-fullscreen-content" style="position:absolute;bottom:7rem;right:2rem;z-index:333">

                          <p class="text-right" style="color:#fff!important;font-size:16px">{{ project.label }}</p>

                        </div>
                        <div class="project-detail-full-overlay">
                             <div class='icon-scroll' style="transform: rotate(90deg);"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <!--/MAIN BODY-->
    <div class="container-fluid no-padd  d-none d-md-block">
        <div class="row-fluid no-padd">
            <div class="scol-sm-12 no-padd">
                <div class="project-detail-fullscreen ">
                    <div class="project-detail-full-main slick-slider" data-key="1" data-arrows="1" data-autoplay="1"
                        data-speed="2500" data-autoplay-speed="6000" data-fade="1" data-for=".project-detail-full-thumb"
                        data-width="0" data-slides="1">
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% if project.photo2 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo2 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% endif %}
                        {% if project.photo3 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo3 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}
                        {% if project.photo4 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-lazy-data-src="{{ asset('assets/img/projects/' ~ project.photo4 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}
                        {% if project.photo5 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                           <img data-lazy-data-src="{{ asset('assets/img/projects/' ~ project.photo5 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}

                        {% if project.addedPictures is not empty %}
                        {% for picture in project.addedPictures %}
                        <div class="project-detail-main-slide slick-slide  {{ picture.id }}">
                            <img data-src="{{ asset('assets/img/projects/' ~ picture.name ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% endfor %}
                        {% endif %}

                    </div>

                    <div class="project-detail-full-overlay">

                        <div class="pulse1"></div>
                        <div class="pulse2"></div>
                        <div class="icon"></div>
                    </div>

                    <div class="project-detail-full-thumb slick-slider" data-key="1" data-arrows="0" data-autoplay="0"
                        data-speed="1000" data-autoplay-speed="1000" data-for=".project-detail-full-main" data-width="0"
                        data-focus="1" data-slides="5">
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% if project.photo2 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo2 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}
                        {% if project.photo3 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo3 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}
                        {% if project.photo4 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-lazy-data-src="{{ asset('assets/img/projects/' ~ project.photo4 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}
                        {% if project.photo5 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-lazy-data-src="{{ asset('assets/img/projects/' ~ project.photo5 ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                         {% endif %}
                        {% if project.addedPictures is not empty %}
                        {% for picture in project.addedPictures %}
                        <div class="project-detail-main-slide slick-slide  {{ picture.id }}">
                            <img width="1800" height="1417" data-src="{{ asset('assets/img/projects/' ~ picture.name ) }}"
                                class="s-img-switch lazy" alt="slider image" />
                        </div>
                        {% endfor %}
                        {% endif %}
                    </div>
                    <div class="project-detail-fullscreen-content">

                        {# <h6 class="project-detail-fullscreen-content-subtitle"> ENVIRONMENT</h6> #}

                        <p style="color:#fff!important;font-size:16px">{{ project.label }}</p>

                        {# <div class="project-detail-fullscreen-content-descr content" >
                            <p style="line-height: 14px;">{{ project.description }} </p>
                        </div> #}

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid no-padd d-md-none">
        <div class="row-fluid no-padd">
            <div class="col-sm-12 no-padd ">
                <div class="portfolio-slider-wrap full_showcase_slider showcase_slider ">
                    <div class="swiper-container" data-mouse="0" data-space="0" data-pagination-type="bullets"
                        data-mode="horizontal" data-autoplay="5000" data-loop="2" data-speed="1500" data-center="0"
                        data-responsive="responsive" data-slides-per-view="4" data-xs-slides="1,0"
                        data-sm-slides="2,0" data-md-slides="3,0" data-lg-slides="4,0">
                        <div class="project-detail-full-overlay" style="z-index:11"></div>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                            alt="seascape-villa image" class="s-img-switch">
                                    </span>

                                </div>

                            </div>

                            {% if project.photo2 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo2 ) }}"
                                            alt="european-lard-station image" class="s-img-switch">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if project.photo3 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo3 ) }}"
                                            alt="european-lard-station image" class="s-img-switch ">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if project.photo4 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo4 ) }}"
                                            alt="european-lard-station image" class="s-img-switch ">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if project.photo5 is not empty %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ project.photo5 ) }}"
                                            alt="european-lard-station image" class="s-img-switch ">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% for picture in project.addedPictures %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/projects/' ~ picture.name ) }}"
                                            alt="european-lard-station image" class="s-img-switch ">
                                    </span>

                                </div>

                            </div>
                            {% endfor %}


                        </div>
                        {# <div class="swiper-button-prev swiper-buttons"></div>
                        <div class="swiper-button-next swiper-buttons"></div> #}
                        <div class="project-detail-fullscreen-content" style="position:absolute;bottom:7rem;right:2rem;z-index:333">

                          <p class="text-right" style="color:#fff!important;font-size:16px">{{ project.label }}</p>

                        </div>
                        <div class="project-detail-full-overlay">

                            {# <div class="pulse1"></div>
                            <div class="pulse2"></div>
                            <div class="icon"></div> #}
                             <div class='icon-scroll project-scroll' style="transform: rotate(90deg);"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {% endif %}

{% endblock %}