{% load i18n rangefilter_compat %}
<h3>{{ title }}</h3>
<style>
    {% 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>
    function filter_apply(event, qs_name){
        event.preventDefault();
        const $form = django.jQuery(event.target).closest('form');
        const query_string = $form.find('input#'+qs_name).val();
        const form_data = $form.serialize();
        const amp = query_string === "?" ? "" : "&";  // avoid leading ?& combination
        window.location = window.location.pathname + query_string + amp + form_data;
    }
    function filter_reset(event, qs_name){
        const $form = django.jQuery(event.target).closest('form');
        const query_string = $form.find('input#' + qs_name).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" %}" onclick="filter_apply(event, '{{ choices.0.system_name }}-query-string')">
            <input type="reset" class="button" value="{% trans "Reset" %}" onclick="filter_reset(event, '{{ choices.0.system_name }}-query-string')">
        </div>
    </form>
</div>
