{% load static %}

<div class="results-filter">
    <div class="accordion js-accordion">
        {% if filters.urgency %}
        <div class="accordion__item js-accordion-item active">
            <h6 class="accordion-header js-accordion-header filter-item-header">
                <span> Filter by Urgency </span>
                <i class="fas fa-sort-down" aria-hidden="true"></i>
            </h6>
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents">
                    {% for urgency in filters.urgency %}
                        <label class="checkbox-container" for="{{ urgency }}">
                            <span class="filter-sub-item">{{ urgency }}</span>
                            <input type="checkbox" id="{{ urgency }}" name="urgency" value="{{ urgency }}"
                                   class="product-filter urgency">
                            <span class="checkmark"></span>
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
       
    </div>
    <div class="accordion js-accordion">
        {% if filters.severity %}
        <div class="accordion__item js-accordion-item active">
            <h6 class="accordion-header js-accordion-header filter-item-header">
                <span> Filter by Severity </span>
                <i class="fas fa-sort-down" aria-hidden="true"></i>
            </h6>
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents">
                    {% for severity in filters.severity %}
                        <label class="checkbox-container" for="{{ severity }}">
                            <span class="filter-sub-item">{{ severity }}</span>
                            <input type="checkbox" id="{{ severity }}" name="severity" value="{{ severity }}"
                                   class="product-filter severity">
                            <span class="checkmark"></span>
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
       
    </div>
    <div class="accordion js-accordion">
        {% if filters.certainty %}
        <div class="accordion__item js-accordion-item active">
            <h6 class="accordion-header js-accordion-header filter-item-header">
                <span> Filter by Certainty </span>
                <i class="fas fa-sort-down" aria-hidden="true"></i>
            </h6>
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents">
                    {% for certainty in filters.certainty %}
                        <label class="checkbox-container" for="{{ certainty }}">
                            <span class="filter-sub-item">{{ certainty }}</span>
                            <input type="checkbox" id="{{ certainty }}" name="certainty" value="{{ certainty }}"
                                   class="product-filter certainty">
                            <span class="checkmark"></span>
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
       
    </div>
</div>

{% block extra_js %}
    <script src="{% static 'js/common.js'%}"></script>
    <script>
        
        $(document).ready(function () {

            // If on smaller screens, collapse all filter items
            const windowWidth = $(window).width();

            if (windowWidth <= 768) {
                //for  smaller devices
                $('.results-filter .js-accordion-item').removeClass('active');
            }

            // initialize filter accordion
            accordion.init({speed: 300, oneOpen: false});

            const listButton = $("#list-view-button");
            const gridButton = $("#grid-view-button");
            const wrapper = $(".results-list");
            const resultItem = $(".result-list-item");


            const params = getParams(window.location.href);

            // mark checkboxes from params url, on load
            markCheckboxesFromUrlParams('product-filter', params, function (params) {
                if (params && params.view) {
                    if (params.view === 'grid') {
                        listButton.removeClass("active");
                        gridButton.addClass("active");
                        wrapper.removeClass("list-view").addClass("grid-view columns is-mobile is-multiline");
                        resultItem.addClass("column is-one-third-desktop is-full-mobile");
                    } else {
                        gridButton.removeClass("active");
                        listButton.addClass("active");
                        wrapper.removeClass("grid-view columns is-mobile is-multiline").addClass("list-view");
                        resultItem.removeClass("column is-one-third-desktop is-full-mobile");
                    }
                }
            });

            const baseUrl = "{{ page.url }}";

            filterChangeListener('product-filter', params, function (clickedEl, url_params) {
                window.location.href = `${baseUrl}?${url_params}#results`;
            });

        });


    </script>

{% endblock %}