{% load i18n %}
<h3>{% trans 'By' %} {{ title }}</h3>
<ul>
    <li data-field="{{ spec.lookup_kwarg }}" data-query-string="{{ spec.query_string }}">
        {% for choice in choices %}
            <div>
                <input type="checkbox" {% if choice.selected %}checked="checked"{% endif %} value="{{ choice.value }}" class="checkbox-filter">
                {{ choice.display }}
            </div>
        {% endfor %}
        <input class="submit-checkbox-filter" type="submit" value="{% trans "Search" %}">
        <input class="reset-checkbox-filter" type="reset" value="{% trans "Clear" %}">
    </li>
    <script>
        $(function () {
            $(document.body).on('click', '.submit-checkbox-filter', function (e) {
                e.preventDefault();
                var $parent = $(this).parent();
                var url = window.location.pathname + $parent.data('query-string');
                var checkboxes = $parent.find('input.checkbox-filter:checkbox:checked');
                if (checkboxes.length) {
                    var fieldName = $parent.data('field');
                    url += '&' + fieldName + '=';
                    var values = $.map(checkboxes, function(n, i){
                          return n.value;
                    }).join(',');
                    window.location = url + values;
                } else {
                    window.location = url;
                }
            });

            $(document.body).on('click', '.reset-checkbox-filter', function (e) {
                e.preventDefault();
                var $parent = $(this).parent();
                var checkboxes = $parent.find('input.checkbox-filter:checkbox:checked');
                checkboxes.each(function () {
                    $(this).removeAttr('checked');
                });
                window.location = window.location.pathname + $parent.data('query-string');
            });
        });
    </script>
</ul>