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

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

{% block body %}

    <!--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" >
                        {% if sale.video is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <video autoplay loop playsinline muted class="videoSection"  id="videoSection">
                                <source src="{{ asset('assets/video/' ~ sale.video ) }}" type="video/mp4" class="lazy" >
                                
                            </video>
                            <a id="MuteButton" class="muted" onclick="toggleMute();" style="margin-top:300px;z-index:111111;cursor:pointer"></a>
                        </div>
                        {% endif %}
                        {% if sale.photo1 is not empty %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/sales/' ~ sale.photo1 ) }}"
                                class="s-img-switch lazy" alt="slider image lazy" />
                        </div>
                        {% endif %}
                        {% if sale.photo2 is defined and sale.photo2 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/sales/' ~ sale.photo2 ) }}"
                                class="s-img-switch lazy" alt="slider image lazy" />
                        </div>
                        {% endif %}
                        {% if sale.photo3 is defined and sale.photo3 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/sales/' ~ sale.photo3 ) }}"
                                class="s-img-switch lazy" alt="slider image lazy" />
                        </div>
                        {% endif %}
                        {% if sale.photo4 is defined and sale.photo4 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img data-src="{{ asset('assets/img/sales/' ~ sale.photo4 ) }}"
                                class="s-img-switch lazy" alt="slider image lazy" />
                        </div>
                        {% endif %}
                        {% if sale.photo5 is defined and sale.photo5 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                           <img data-src="{{ asset('assets/img/sales/' ~ sale.photo5 ) }}"
                                class="s-img-switch lazy" alt="slider image lazy" />
                        </div>
                        {% 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">
                        {% if sale.video is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/playy.png' ) }}"
                                class="s-img-switch" alt="slider image lazy" />
                        </div>
                        {% endif %}
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/sales/' ~ sale.photo1 ) }}"
                                class="s-img-switch " alt="slider image lazy" />
                        </div>
                        {% if sale.photo2 is defined and sale.photo2 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/sales/' ~ sale.photo2 ) }}"
                                class="s-img-switch " alt="slider image lazy" />
                        </div>
                        {% endif %}
                         {% if sale.photo3 is defined and sale.photo3 is not null %}

                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/sales/' ~ sale.photo3 ) }}"
                                class="s-img-switch " alt="slider image lazy" />
                        </div>
                          {% endif %}
                         {% if sale.photo4 is defined and sale.photo4 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/sales/' ~ sale.photo4 ) }}"
                                class="s-img-switch " alt="slider image lazy" />
                        </div>
                          {% endif %}
                         {% if sale.photo5 is defined and sale.photo5 is not null %}
                        <div class="project-detail-main-slide slick-slide">
                            <img src="{{ asset('assets/img/sales/' ~ sale.photo5 ) }}"
                                class="s-img-switch " alt="slider image lazy" />
                        </div>
                        {% endif %}
                        {% for picture in sale.addedPictures %}
                        <div class="project-detail-main-slide slick-slide">
                            <img width="1800" height="1417" src="{{ asset('assets/img/sales/' ~ picture.name ) }}"
                                class="s-img-switch " alt="slider image lazy" />
                        </div>
                        {% endfor %}
                        
                    </div>
                    <div class="project-detail-fullscreen-content">
                        <a id="MuteButton" class="muted" onclick="toggleMute();" style="z-index:111111;cursor:pointer;font-size: 16px!important;"><span class="material-symbols-outlined" style="z-index:111111;cursor:pointer;font-size: 16px!important;color:white">
                            volume_up
                            </span></a>
                        <p class="project-detail-fullscreen-content-subtitle">For Sale</p>

                        <p style="color:#fff!important;font-size:16px">{{ sale.label }}</p>
                        
                        <div class="project-detail-fullscreen-content-descr content" >
                            <p style="line-height: 14px;">{{ sale.description }} </p>
                        </div>
                        <div class="project-detail-fullscreen-content-descr content" >
                            <a href="mailto:steve@stevekrack.com"
                            class="icon text-uppercase " style="    background: transparent!important;font-size: 16px;" > <span style="font-family: 'Epitet-Light';">Contact Me</span></a>
                        </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="0" data-loop="0" 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">
                                       <video autoplay loop playsinline muted class="videoSection" >
                                            <source src="{{ asset('assets/video/' ~ sale.video ) }}" type="video/mp4" class="lazy">
                                        </video>
                                    </span>

                                </div>

                            </div>
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img src="{{ asset('assets/img/sales/' ~ sale.photo1 ) }}"
                                            alt="seascape-villa image" class="s-img-switch">
                                    </span>

                                </div>

                            </div>

                

                            {% if sale.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/sales/' ~ sale.photo2 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if sale.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/sales/' ~ sale.photo3 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

                            {% if sale.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/sales/' ~ sale.photo4 ) }}"
                                            alt="european-lard-station image" class="s-img-switch lazy">
                                    </span>

                                </div>

                            </div>
                            {% endif %}

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

                                </div>

                            </div>
                            {% endif %}

                            {% for picture in sale.addedPictures %}
                            <div class="swiper-slide">
                                <div class="slide-image full-height-window-hard">
                                    <span class="images-slider-wrapper">
                                        <img data-src="{{ asset('assets/img/sales/' ~ 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;top:40%;left:40%;margin:auto;z-index:333">

                        <div class="phone-container" >
                            <div class="phone">
                            </div>
                        </div>
                         </div>
                        <div class="project-detail-fullscreen-content" style="position:absolute;bottom:4rem;right:2rem;z-index:333">

                         
         
                        {# <div class="message">
                        Please rotate your device!
                        </div> #}
                        <a id="MuteButton" class="muted" onclick="toggleMute();" style="z-index:111111;cursor:pointer;font-size: 16px!important;"><span class="material-symbols-outlined" style="z-index:111111;cursor:pointer;font-size: 16px!important;color:white">
                            volume_up
                            </span></a>
                        <p class="project-detail-fullscreen-content-subtitle text-white">For Sale</p>

                        <p style="color:#fff!important;font-size:16px">{{ sale.label }}</p>
                        
                        <div class="project-detail-fullscreen-content-descr content" >
                            <p style="color:#fff!important;line-height: 14px;">{{ sale.description |nl2br }} </p>
                        </div>
                        <div class="project-detail-fullscreen-content-descr content" >
                            <a href="mailto:steve@stevekrack.com"
                            class="icon text-uppercase text-white" style="    background: transparent!important;font-size: 16px;" > <span style="font-family: 'Epitet-Light';">Contact Me</span></a>
                        </div>
                        

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


{% endblock %}