{% load i18n admin_static %}
{% block extra_js %}
  {% include "wagtailadmin/shared/datetimepicker_translations.html" %}
  <script type="text/javascript">
  $(function() {
    $('#id_drf__submission_date__gte').datetimepicker({
      timepicker: false,
      format: 'Y-m-d',
      i18n: {
          lang: window.dateTimePickerTranslations
      },
      lang: 'lang'
    });
    $('#id_drf__submission_date__lte').datetimepicker({
      timepicker: false,
      format: 'Y-m-d',
      i18n: {
          lang: window.dateTimePickerTranslations
      },
      lang: 'lang'
    });
    $("#resetbtn").click(function(){
      $(':input','#date_range_filter').val("");
    });
  });
  </script>
{% endblock %}
<h3 class="filter__label">
  {% 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;
  }
</style>
{% with choices.0 as i %}
<form id="date_range_filter" method="GET" action="">
  {{ spec.form.media }}
  {{ spec.form.as_p }}
  <p class="submit-row">
  {#create hidden inputs to preserve values from other filters and search field#}
  </p>
  {% for k, v in i.get_query.items %}
    <input type="hidden" name="{{ k }}" value="{{ v }}">
  {% endfor %}
  <button class="button" type="submit">{% trans "Search" %}</button>
  <button class="button" type="submit" id="resetbtn">{% trans "Clear" %}</button>
</form>
{% endwith %}
