{% load i18n rangefilter_compat %}
<h3>{{ title }}</h3>
<style nonce="{{ spec.request.csp_nonce }}">
    {% default_css_vars_if_needed %}
    .numericrangefilter .button, .numericrangefilter input[type=submit], .numericrangefilter input[type=button], .numericrangefilter .submit-row input, .numericrangefilter a.button,
    .numericrangefilter .button, .numericrangefilter input[type=reset] {
        background: var(--button-bg);
        padding: 4px 5px;
        border: none;
        border-radius: 4px;
        color: var(--button-fg);
        cursor: pointer;
    }
    .numericrangefilter {
        padding-left: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    .numericrangefilter p {
        padding-left: 0px;
        display: inline;
    }
    .numericrangefilter p input {
        margin-bottom: 10px;
        width: 70px;
    }
</style>

{% comment %}
Force load jsi18n, issues #5
https://github.com/django/django/blob/stable/1.10.x/django/contrib/admin/templates/admin/change_list.html#L7
{% endcomment %}

<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
<script type="text/javascript" nonce="{{ spec.request.csp_nonce }}">
    django.jQuery('document').ready(function () {
        django.jQuery('.numericrangefilter #{{ choices.0.system_name }}-form input[type="submit"]').click(function(event) {
            event.preventDefault();
            var form = django.jQuery(this).closest('div.numericrangefilter').find('form');
            var query_string = django.jQuery('input#{{ choices.0.system_name }}-query-string').val();
            var form_data = form.serialize();
            var amp = query_string === "?" ? "" : "&";  // avoid leading ?& combination
            window.location = window.location.pathname + query_string + amp + form_data;
        });

        django.jQuery('.numericrangefilter #{{ choices.0.system_name }}-form input[type="reset"]').click(function() {
            var form = django.jQuery(this).closest('div.numericrangefilter').find('form');
            var query_string = form.find('input#{{ choices.0.system_name }}-query-string').val();
            window.location = window.location.pathname + query_string;
        });
    });
</script>
<div class="numericrangefilter">
    <form method="GET" action="." id="{{ choices.0.system_name }}-form">
        {{ spec.form.as_p }}
        {% for choice in choices %}
            <input type="hidden" id="{{ choice.system_name }}-query-string" value="{{ choice.query_string }}">
        {% endfor %}
        <div class="controls">
            <input type="submit" class="button" value="{% trans "Search" %}">
            <input type="reset" class="button" value="{% trans "Reset" %}">
        </div>
    </form>
</div>
