{% load i18n djadmin %}
{% dj_date_filter spec choices as date_range %}
<details class="dj-filter{% if date_range %} dj-filter--date{% endif %}" data-filter-title="{{ title }}" open>
  <summary class="dj-filter-summary">
    <span>{{ title|capfirst }}</span>
    {% dj_icon "chevron-down" "dj-icon dj-icon--xs dj-filter-chevron" %}
  </summary>
  {% if date_range %}
    {% comment %}
      Django renders a date filter as five links stacked down the sidebar
      (Any date / Today / Past 7 days / This month / This year). The same
      filter reads as a row of chips plus one range field.

      Every chip is a plain link carrying the __gte / __lt pair that
      DateFieldListFilter expects, so the common ranges work with JavaScript
      switched off. The custom range does not: its two visible inputs are
      deliberately nameless, and JavaScript copies their values into the hidden
      parameters below. An empty parameter would reach the queryset as
      `field__gte=""` and bounce the whole changelist to ?e=1, so a field that
      is not filled in must not be submitted at all.
    {% endcomment %}
    <div class="dj-daterange" data-dj-daterange
         data-gte="{{ date_range.gte_param }}" data-lt="{{ date_range.lt_param }}"
         data-tz-offset="{{ date_range.tz_offset }}">
      <div class="dj-daterange-chips">
        <a href="{{ date_range.reset_url }}" class="dj-chip{% if not date_range.active %} is-on{% endif %}">{% translate "Any date" %}</a>
        {% for shortcut in date_range.shortcuts %}
          <a href="{{ shortcut.url }}" class="dj-chip{% if shortcut.selected %} is-on{% endif %}">{{ shortcut.label }}</a>
        {% endfor %}
      </div>
      <form class="dj-daterange-form" method="get" action="" hidden data-dj-daterange-form>
        {% for hidden in date_range.carry %}<input type="hidden" name="{{ hidden.name }}" value="{{ hidden.value }}">{% endfor %}
        <input type="hidden" data-dj-range-param="gte" value="{{ date_range.since }}">
        {# The visible "to" is inclusive; this one is the exclusive bound the queryset wants. #}
        <input type="hidden" data-dj-range-param="lt" value="{{ date_range.until_raw }}">
        <span class="dj-picker dj-picker--date">
          <input type="text" class="vDateField" data-dj-range="from" value="{{ date_range.since }}" autocomplete="off"
                 aria-label="{% blocktranslate with name=title %}{{ name }} from{% endblocktranslate %}">
          <span class="dj-picker-btn" aria-hidden="true">{% dj_icon "calendar" "dj-icon dj-icon--sm" %}</span>
        </span>
        <span class="dj-daterange-sep" aria-hidden="true">→</span>
        <span class="dj-picker dj-picker--date">
          <input type="text" class="vDateField" data-dj-range="to" value="{{ date_range.until }}" autocomplete="off"
                 aria-label="{% blocktranslate with name=title %}{{ name }} to{% endblocktranslate %}">
          <span class="dj-picker-btn" aria-hidden="true">{% dj_icon "calendar" "dj-icon dj-icon--sm" %}</span>
        </span>
        <button type="submit" class="dj-btn dj-btn--sm dj-btn--primary dj-daterange-apply">{% translate "Apply" %}</button>
      </form>
    </div>
  {% else %}
    <ul class="dj-filter-choices">
      {% for choice in choices %}
        <li{% if choice.selected %} class="selected"{% endif %}>
          <a href="{{ choice.query_string|iriencode }}">
            <span class="dj-filter-check">{% if choice.selected %}{% dj_icon "check" "dj-icon dj-icon--xs" %}{% endif %}</span>
            <span class="dj-filter-label">{{ choice.display }}</span>
          </a>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</details>