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

{% block body %}

    {% if app.request.query.get("preview") %}
        {% set images_folder = folders.products_preview_public %}
    {% else %}
        {% set images_folder = folders.products_public %}
    {% endif %}

    {% include "/elements/hero_product.html.twig" with {product:product} %}
    <div class="container-fluid product-icons">
        {% if product.icons is not empty %}
            {% for icon in product.icons|default([]) %}
                <div class="product-icon">
                    <img src="{{ images_folder }}{{ product.id }}/icons/{{ icon }}">
                </div>
            {% endfor %}
        {% else %}
            {% for icon in product.data.icons|default([]) %}
                <div class="product-icon {{ icon }}">{{ widgets.icon(icon) }}</div>
            {% endfor %}
        {% endif %}
    </div>
    <div class="container-fluid product-section-1">
        <div class="row">
            <div class="col-12 col-md-7 product-text">

                <h2>{{ product.data.section1.title }}</h2>
                <div class="text">{{ product.data.section1.text|raw }}</div>
            </div>
            <div class="col-12 col-md-5 image-wrap flex-wraper-center">
                <img data-animate="bounceInLeft" class="prod-img-1" alt="{{product.name}}" src="{{ images_folder }}{{ product.id  }}/img1.png">
            </div>
        </div>
    </div>

    <div class="container-fluid product-section-2">
        <div class="row">
            <div class="col-12 col-md-6">
                <img data-animate="bounceInRight" class="prod-img-2" alt="{{product.name}}" src="{{ images_folder }}{{ product.id  }}/img2.png">
            </div>
            <div class="col-12 col-md-6 product-text">
                <h2>{{ product.data.section2.title }}</h2>
                <div class="text">
                    {{ product.data.section2.text|raw }}
                </div>
                <img data-animate="bounceInRight" class="prod-img-2bis" alt="{{product.name}}" src="{{ images_folder }}{{ product.id  }}/img2.png">
            </div>
        </div>
    </div>

    <div class="container-fluid product-section-3">
        <div class="row position-relative align-items-center">
            <div class="col-12 col-md-6 image-wrap">
                <img data-animate="bounceInRight" class="prod-img-3" alt="{{product.name}}" src="{{ images_folder }}{{ product.id  }}/img3.png">
            </div>
            <div class="col-12 col-md-6 product-text">
                <h2>{{ product.data.section3.title }}</h2>
                <div class="text">
                    {{ product.data.section3.text|raw }}
                </div>
            </div>
            <img data-animate="bounceInLeft" class="prod-img-4" alt="{{product.name}}" src="{{ images_folder }}{{ product.id  }}/img4.png">
        </div>
        <div class="row blue-section">
            <div class="col-12"></div>
        </div>
    </div>

    <div id="photos" class="container-fluid product-section-4 p-0 ">
        <div class="row no-gutters">
            <div class="col-12 product-text p-5">
                <h2>{{ product.data.section4.title }}</h2>
                <div class="text">
                    {{ product.data.section4.text|raw }}
                </div>
            </div>
            <div class="col-12 no-padding">
                <div class="product-gallery">
                    {% for photo in product.data.gallery %}
                        <img src="{{ images_folder }}{{ product.id }}/gallery/{{ photo }}">
                    {% endfor %}
                </div>
            </div>
        </div>

    </div>
    <div id="tech" style="background-image:url({{ images_folder }}{{ product.id }}/img5.png); " class="container-fluid product-section-5">
        <div class="row">
            <div class="col-12 product-text">
                <h2>TECHNICAL DATA</h2>
                <ul class="tehnical-data">
                    {% for name,val in product.data.tech %}
                        <li><span>{{ name }}:</span> <span>{{ val }}</span></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div id="downloads" class="container-fluid product-section-6">
        <div class="row">
            <div class="col-12 product-text downloads-list">
                <h2>DOWNLOADS</h2>
                {% for item in product.supportItems %}
                <a href="/uploads/downloads/{{ item.file }}" download="{{ item.file }}" class="download-item">
                    <div class="text">{{ item.category.name }} <span class="filename">({{ item.file }})</span></div>
                    <i class="fa fa-download"></i>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>

    <div id="product-menu-bar" class="product-menu">
        <div class="product-menu__links">
            <ul class="product-menu__list">
                <li class="product-menu__list-item"><span data-anchor="photos">Photos</span></li>
                <li class="product-menu__list-item"><span data-anchor="tech">Technical data</span></li>
                <li class="product-menu__list-item"><span data-anchor="downloads">Downloads</span></li>
            </ul>
        </div>
    </div>

{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script type="text/javascript">
        $('.product-gallery').slick({
            slidesPerRow: 3,
            slidesToShow: 3,
            prevArrow: '<div class="slick-prev slick-arrow" style="display: block;"><i class="fa fa-angle-left"></i></div>',
            nextArrow: '<div class="slick-next slick-arrow" style="display: block;"><i class="fa fa-angle-right"></i></div>',
            responsive: [
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    }
                }
            ]
        });
        $(".product-menu__list-item span").on("click", function () {
            $('html, body').animate({
                scrollTop: $("#"+$(this).data("anchor")).offset().top - 150
            }, 800);
        });
        var productMenuBar = $("#product-menu-bar");
        var docHeight = $(document).height();
        document.addEventListener('scroll', function(e){
            var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
            var top_of_element = $("#footer").offset().top;
            if(window.scrollY < 200 && productMenuBar.hasClass("show-bar")){
                productMenuBar.removeClass("show-bar")
            }else if(bottom_of_screen > top_of_element){
                if(productMenuBar.hasClass("show-bar")){
                    productMenuBar.removeClass("show-bar")
                }
            }else if(window.scrollY > 200 && !productMenuBar.hasClass("show-bar")){
                productMenuBar.addClass("show-bar")
            }
        });
    </script>
{% endblock %}