{% 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="{{ widgets.text(4).content }}" name="search-support" id="search-support">
                <i class="fa fa-search"></i>
                <div id="search_suggestions">
                    <ul>
                        <li>Arcturus <span>Cases</span></li>
                    </ul>
                </div>
            </div>
            <div class="col-12 downloads-list">

            </div>
            <div class="support-text">
                {{ widgets.text(5).content }}
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        var xhr;
        $("#search-support").on("keyup", function () {
            if(xhr){
                xhr.abort();
            }
            if($(this).val().length > 2){
                $("#search_suggestions").show();
                $("#search_suggestions .help").remove();
                if($("#search_suggestions .loader").length == 0){
                    $("#search_suggestions").prepend('<img width="20" height="20" src="/images/circle.png" class="loader">');
                }
                xhr = $.ajax({
                    type: "GET",
                    url: "{{ url("support-products-list") }}?q="+$("#search-support").val(),
                    success: function(data){
                        $("#search_suggestions").html(data);
                    }
                });
            }else if($(this).val().length > 0){
                $("#search_suggestions").show();
                $("#search_suggestions").html("<span class='help'>Type at least 3 characters</span>");
                //afiseaza text de help
            }else{
                $("#search_suggestions").hide();
            }
        });

        $("#search_suggestions").on("click","li",function(){
            $("#search_suggestions").hide();
            $("#search-support").val($(this).data("name"));
            $(".downloads-list").html('<img width="40" height="40" src="/images/circle.png" class="loader">')
            $.ajax({
                type: "GET",
                url: "{{ url("support-results") }}/"+$(this).data("product-id"),
                success: function(data){
                    $(".downloads-list").html(data);
                }
            });
        });

        $(document).ready(function(){
            var content = $("#content");
            var dlInterval = setInterval(function(){
                if(content.hasClass("computed")){
                    var dlHeight = content.height() - $('.support-page').outerHeight(true);
                    // $('.downloads-list').css("min-height",dlHeight+"px");
                    clearInterval(dlInterval);
                    $('.support-text').addClass("visible");
                }
            },50);
        });

    </script>
{% endblock %}