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

{% block body %}

    {% include "/elements/hero_home.html.twig" %}

    <div class="container-fluid pt-5 home-cats-row">
        <div class="row">
            {% for cat in categories %}
                {% include "/elements/cat_element.html.twig" with {cat:cat} %}
            {% endfor %}
        </div>
    </div>
    <div class="news-parallax container-fluid pt-5">
        {% include "/elements/home_news.html.twig" with {news:news} %}
    </div>

    <div class="home-last-box container-fluid pt-5 pb-5">
        <div class="row">
            {% include "/elements/home_blog_item.html.twig" %}
            {% include "/elements/home_social_box.html.twig" %}
        </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"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
{% endblock %}

{% block javascripts %}

    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script type="text/javascript">
        var heroHeight = (window.innerHeight - document.getElementById("header").getBoundingClientRect().height) + "px";
        document.getElementById("hero_slider").style.height = heroHeight;
        var sliders = document.getElementsByClassName("home_hero_wrap");
        var i;
        for (i = 0; i < sliders.length; i++) {
            sliders[i].style.height = heroHeight;
        }
        var $el = $('.news-parallax');
        var eltop = $el.offset().top;
        var elbottom = eltop + $el.height();

        $(window).on('scroll', function () {

            var scroll = $(document).scrollTop();

            if(window.innerHeight + scroll > eltop){
                var val1 =  (window.innerHeight + scroll - eltop) / $el.height();
                var val = val1 * 150 - 150;
                $el.css({
                    'background-position':'50% '+val+'px'
                });
            }

        });

        $(".home-news-form").on("submit", function(e){
            e.preventDefault();
            var form = $(this);
            form.find("button").hide();
            $(".news-error-message").hide();
            form.find(".loader").addClass("d-block");
            $.ajax({
                type: "GET",
                url: "{{ url("news_join") }}?email="+form.find("input").val(),
                success: function(data){
                    form.find(".loader").removeClass("d-block");
                    $(".news-message").show();
                },
                error: function(data){
                    form.find(".loader").removeClass("d-block");
                    $(".news-error-message").html(data.messsage).show();
                    form.find("button").show();
                }
            });
        });

        $(document).ready(function(){
            $('#hero_slider').bxSlider({
                pager: false,
                touchEnabled: window.innerWidth < 700 ? true : false
            });
        });
    </script>

    <script type="text/javascript">
        $('.home-cats-row > .row').slick({
            slidesPerRow: 4,
            slidesToShow: 4,
            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,
                    }
                },
                {
                    breakpoint: 1400,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                    }
                }
            ]
        });
    </script>

{% endblock %}