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

{% block body %}

    <div class="container-fluid no-header-content support-page">
        <div class="row">
            <h1>DOWNLOADS</h1>

            <div class="col-12 search-filter">
                <input placeholder="Search.." name="search-support" id="search-support">
                <i class="fa fa-search"></i>
            </div>
            <div class="col-12 cat-filter-wrap">
                <ul class="cat-filter">
                    <li class="active" data-filter="all">All</li>
                    {% for cat in cats %}
                        <li data-filter="{{ cat.id }}">{{ cat.name }}</li>
                    {% endfor %}
                </ul>
            </div>
            <div class="col-12 downloads-list">
                {% for item in items %}
                    <a data-filter="{{ item.category.id }}" href="/uploads/downloads/{{ item.file }}" download="{{ item.file }}" class="download-item">
                        <div class="text">{{ item.product.name }} {{ item.category.name }}</div>
                        <i class="fa fa-download"></i>
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(".cat-filter li").on("click", function(){
            if(!$(this).hasClass("active")){
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                filter();
            }
        });
        $("#search-support").on("keyup", function () {
            filter()
        });

        function filter(){
            var catFilter = $(".cat-filter li.active");
            if(catFilter.data("filter") == "all"){
                var selector = ".downloads-list > a";
            }else{
                var selector = ".downloads-list > a[data-filter='"+catFilter.data("filter")+"']";
            }
            $(".downloads-list > a").hide();
            var searchValue = $('#search-support').val().toLowerCase();
            if(searchValue == ""){
                $(selector).show();
            }else{
                $(selector).each(function(){
                   if($(this).find(".text").html().toLowerCase().includes(searchValue)){
                       $(this).show();
                   }
                });
            }
        }
    </script>
{% endblock %}