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

{% block body %}

    {% if category.allProducts.count == 0 %}
        <div style="background-image:url(/images/coming_soon_back.jpg);" class="coming_soon_wrap">
            <div class="container-fluid h-100">
                <div class="col-12 h-100">
                    <div class="coming-text h-100" data-animate="bounceIn">
                        <img src="/images/coming_soon_text.png">
                    </div>
                </div>
            </div>
        </div>
    {% else %}

    <div style="background-image:url(/uploads/pictures/{{ category.header }});" id="page_hero_wrap" class="page_hero_wrap">
        <div class="container-fluid h-100">
            <div class="col-12">
                <div class="hero-text" data-animate="bounceIn">
                    <h1>{{ category.name }}</h1>
                </div>
            </div>
        </div>
    </div>
    {% include "/elements/scroll_down.html.twig" %}
    <div class="container-fluid">
        <div class="row flex-row-center">
        {% for prod in category.allProducts %}
            {% include "/elements/cat_prod_element.html.twig" with {prod:prod} %}
        {% endfor %}
        </div>
    </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

        window.onresize = function(){
            sizeContent();
        };
        sizeContent();

        function sizeContent(){
            if(window.innerWidth > 768){
                $(".coming_soon_wrap").css("height", (window.innerHeight - $("header").height() - $("footer").height()) + "px");
            }else{
                $(".coming_soon_wrap").css("height", window.innerWidth / 1.77 + "px");
            }
        }

        if(window.innerWidth > 768){
            document.getElementById("page_hero_wrap").style.height = (window.innerHeight - document.getElementById("header").getBoundingClientRect().height) + "px";
        }

    </script>
{% endblock %}