{% load i18n admin_static %}
<h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>
<style>
    .calendarbox, .clockbox {
        /* Make sure the calendar widget popover displays in front of the sidebar */
        z-index: 1100;
        margin-left: -16em !important;
        margin-top: 9em !important;
    }
    .datetimeshortcuts {
        /* Hide "|" symbol */
        font-size: 0;
    }
    .datetimeshortcuts a:before{
        /* Restore deleted spaces */
        content: " ";
    }
    .datetimeshortcuts a{
        /* Make text for "Today" a bit smaller so it appears on one line. */
        font-size: 7pt;
    }
    #changelist-filter a {
        display: inline;
    }
</style>
<form method="GET" action="" data-query-string="{{ spec.query_string }}">
    {{ spec.form.media }}
    {{ spec.form.as_p }}
    <p class="submit-row">
        <input class="date-range-filter-submit" type="submit" value="{% trans "Search" %}">
        <input class="data-range-filter-reset" type="reset" value="{% trans "Clear" %}">
    </p>
</form>
<script>
    $(function () {
        $(document.body).on('click', '.date-range-filter-submit', function (e) {
            e.preventDefault();
            var $parent = $(this).parents('form');
            window.location = window.location.pathname + $parent.data('query-string') + '&' + $parent.serialize();
        });
        $(document.body).on('click', '.data-range-filter-reset', function (e) {
            e.preventDefault();
            window.location = window.location.pathname + $(this).parents('form').data('query-string');
        });
    });
</script>
