{% load i18n %}
{% blocktranslate trimmed with filter_title=title %} By {{ filter_title }} {% endblocktranslate %}
{{ spec.form.media.js }}
{{ spec.form.media.css }}
<style>
    .wagtail-rangefilter{margin:1em 0 25px 0;}
</style>
<div class="wagtail-rangefilter">
    <form method="GET" 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>
            <button value="{% translate 'Search' %}" type="submit" class="button">{% translate 'Search' %}</button>
            <button value="{% translate 'Reset' %}" type="reset" class="button button-secondary">{% translate 'Reset' %}</button>
        </div>
    </form>
</div>
<script>
    (function() {
        const form = document.getElementById('{{ choices.0.system_name }}-form');
        const queryString = document.getElementById('{{ choices.0.system_name }}-query-string').value;
        const resetButton = form.querySelector('[type="reset"]');

        form.addEventListener("submit", function(e) {
            e.preventDefault();
            const form_data = new FormData(form);
            const amp = queryString === "?" ? "" : "&";  // avoid leading ?& combination
            window.location = window.location.pathname + queryString + amp + new URLSearchParams(form_data).toString();
        });

        resetButton.addEventListener("click", function() {
            window.location = window.location.pathname + queryString;
        });
    })();
</script>