{% load i18n rangefilter_compat %}
<h3>{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
{% comment '' %}
{% if debug %}
    <link rel="stylesheet" type="text/css" href="{% static 'rangefilter/persian-datepicker.css' %}">
    <script type="text/javascript" src="{% static 'rangefilter/persian-date.js' %}"></script>
    <script type="text/javascript" src="{% static 'rangefilter/persian-datepicker.js' %}"></script>
{% else %}
    <link rel="stylesheet" type="text/css" href="{% static 'rangefilter/persian-datepicker.min.css' %}">
    <script type="text/javascript" src="{% static 'rangefilter/persian-date.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'rangefilter/persian-datepicker.min.js' %}"></script>
{% endif %}
{% endcomment %}
    <link rel="stylesheet" type="text/css" href="{% static 'rangefilter/persian-datepicker.css' %}">
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'rangefilter/persian-date.js' %}"></script>
    <script type="text/javascript" src="{% static 'rangefilter/persian-datepicker.js' %}"></script>
<style>
    .admindatefilter .button, .admindatefilter input[type=submit], .admindatefilter input[type=button], .admindatefilter .submit-row input, .admindatefilter a.button,
    .admindatefilter .button, .admindatefilter input[type=reset] {
        background: #79aec8;
        padding: 4px 5px;
        border: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
    }
    .admindatefilter {
        padding-left: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eaeaea;
    }
    .admindatefilter p {
        padding-left: 0px;
        line-height: 0;
    }
    .admindatefilter p.datetime {
        line-height: 0;
    }
    .admindatefilter .timezonewarning {
        display: none;
    }
    .admindatefilter .datetimeshortcuts a:first-child {
        margin-right: 4px;
        display: none;
    }
    .calendarbox {
        z-index: 1100;
    }
    .clockbox {
        z-index: 1100;
        margin-left: -8em !important;
        margin-top: 5em !important;
    }
    .admindatefilter .datetimeshortcuts {
        font-size: 0;
        float: right;
        position: absolute;
        padding-top: 4px;
    }
    .admindatefilter a {
        color: #999;
        position: absolute;
        padding-top: 3px;
        padding-left: 4px;
    }
    @media (min-width: 768px) {
        .calendarbox {
            margin-left: -16em !important;
            margin-top: 9em !important;
        }
    }
    @media (max-width: 767px) {
        .calendarbox {
            overflow: visible;
        }
    }
</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 datefilter_apply(event, qs_name, form_name){
        event.preventDefault();
        var query_string = django.jQuery('input#'+qs_name).val();
        var form_data = django.jQuery('#'+form_name).serialize();
        window.location = window.location.pathname + query_string + '&' + form_data;
    }
    function datefilter_reset(qs_name){
        var query_string = django.jQuery('input#'+qs_name).val();
        window.location = window.location.pathname + query_string;
    }
</script>
<script>
    {% comment %}
    // Code below makes sure that the DateTimeShortcuts.js is loaded exactly once
    // regardless the presence of AdminDateWidget
    // How it worked:
    //  - First Django loads the model formset with predefined widgets for different
    //    field types. If there's a date based field, then it loads the AdminDateWidget
    //    and it's required media to context under {{media.js}} in admin/change_list.html.
    //    (Note: it accumulates media in django.forms.widgets.Media object,
    //    which prevents duplicates, but the DateRangeFilter is not included yet
    //    since it's not model field related.
    //    List of predefined widgets is in django.contrib.admin.options.FORMFIELD_FOR_DBFIELD_DEFAULTS)
    //  - After that Django starts rendering forms, which have the {{form.media}}
    //    tag. Only then the DjangoRangeFilter.get_media is called and rendered,
    //    which creates the duplicates.
    // How it works:
    //  - first step is the same, if there's a AdminDateWidget to be loaded then
    //    nothing changes
    //  - DOM gets rendered and if the AdminDateWidget was rendered then
    //    the DateTimeShortcuts.js is initiated which sets the window.DateTimeShortcuts.
    //    Otherwise, the window.DateTimeShortcuts is undefined.
    //  - The lines below check if the DateTimeShortcuts has been set and if not
    //    then the DateTimeShortcuts.js and calendar.js is rendered
    //
    //  https://github.com/silentsokolov/django-admin-rangefilter/issues/9
    //
    // Django 2.1
    //  https://github.com/silentsokolov/django-admin-rangefilter/issues/21
    
    django.jQuery('document').ready(function () {
        if (!('DateTimeShortcuts' in window)) {
            django.jQuery.when(
                {% for m in spec.form.js %}
                    django.jQuery.getScript('{{m}}'),
                {% endfor %}
                django.jQuery.Deferred(function( deferred ){
                    django.jQuery( deferred.resolve );
                })
            ).done(function(){
                django.jQuery('.datetimeshortcuts').remove();
                DateTimeShortcuts.init();
            });
        }
    });
    {% endcomment %}
</script>
<div class="admindatefilter">
    <form method="GET" action="." id="{{ choices.0.system_name }}-form">
        <input id="date_joined__gte" type="text" class="pDatePicker" {% if choices.0.date_start != None %} value="{{ choices.0.date_start|stringformat:'s' }}"{% endif %}/>
        <input id="date_joined_start" name="date_joined__gte" type="hidden" class="pDatePicker"/>
        <input id="date_joined__lte" type="text" class="pDatePicker" {% if choices.0.date_end != None %} value="{{ choices.0.date_end|stringformat:'s' }}"{% endif %}/>
        <input id="date_joined_end" name="date_joined__lte" type="hidden" class="pDatePicker"/>
        {% for choice in choices %}
            <input type="hidden" id="{{ choice.system_name }}-query-string" value="{{ choice.query_string }}">
        {% endfor %}
        <div class="controls">
            <input type="submit" value="{% trans "Search" %}" onclick="datefilter_apply(event, '{{ choices.0.system_name }}-query-string', '{{ choices.0.system_name }}-form')">
            <input type="reset" class="button" value="{% trans "Reset" %}" onclick="datefilter_reset('{{ choices.0.system_name }}-query-string')">
        </div>
    </form>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#date_joined__lte").persianDatepicker({
        "inline": false,
        "format": "DD/MM/YYYY",
        "viewMode": "day",
        "initialValue": true,
        "initialValueType":"{{ spec.locale }}",
        "autoClose": true,
        "position": "auto",
        "altFormat": "unix",
        "altField": "#date_joined_end",
        "onlyTimePicker": false,
        "onlySelectOnDate": false,
        "calendarType": "{{ spec.locale }}",
        "inputDelay": 800,
        "observer": true,
        "calendar": {
          "persian": {
            "locale": "fa",
            "showHint": true,
            "leapYearMode": "algorithmic"
          },
          "gregorian": {
            "locale": "en",
            "showHint": true
          }
        },
        "navigator": {
          "enabled": true,
          "scroll": {
            "enabled": true
          },
          "text": {
            "btnNextText": "<",
            "btnPrevText": ">"
          }
        },
        "toolbox": {
          "enabled": true,
          "calendarSwitch": {
            "enabled": true,
            "format": "MMMM"
          },
          "todayButton": {
            "enabled": true,
            "text": {
              "fa": "امروز",
              "en": "Today"
            }
          },
          "submitButton": {
            "enabled": false,
            "text": {
              "fa": "تایید",
              "en": "Submit"
            }
          },
          "text": {
            "btnToday": "امروز"
          }
        },
        "timePicker": {
          "enabled": false,
          "step": 1,
          "hour": {
            "enabled": true,
            "step": null
          },
          "minute": {
            "enabled": true,
            "step": null
          },
          "second": {
            "enabled": true,
            "step": null
          },
          "meridian": {
            "enabled": true
          }
        },
        "dayPicker": {
          "enabled": true,
          "titleFormat": "YYYY MMMM"
        },
        "monthPicker": {
          "enabled": true,
          "titleFormat": "YYYY"
        },
        "yearPicker": {
          "enabled": true,
          "titleFormat": "YYYY"
        }
    });


    $("#date_joined__gte").persianDatepicker({
        "inline": false,
        "format": "DD/MM/YYYY",
        "viewMode": "day",
        "initialValue": true,
        "initialValueType":"{{ spec.locale }}",
        "autoClose": true,
        "position": "auto",
        "altFormat": "unix",
        "altField": "#date_joined_start",
        "onlyTimePicker": false,
        "onlySelectOnDate": false,
        "calendarType": "{{ spec.locale }}",
        "inputDelay": 800,
        "observer": true,
        "calendar": {
          "persian": {
            "locale": "fa",
            "showHint": true,
            "leapYearMode": "algorithmic"
          },
          "gregorian": {
            "locale": "en",
            "showHint": true
          }
        },
        "navigator": {
          "enabled": true,
          "scroll": {
            "enabled": true
          },
          "text": {
            "btnNextText": "<",
            "btnPrevText": ">"
          }
        },
        "toolbox": {
          "enabled": true,
          "calendarSwitch": {
            "enabled": true,
            "format": "MMMM"
          },
          "todayButton": {
            "enabled": true,
            "text": {
              "fa": "امروز",
              "en": "Today"
            }
          },
          "submitButton": {
            "enabled": false,
            "text": {
              "fa": "تایید",
              "en": "Submit"
            }
          },
          "text": {
            "btnToday": "امروز"
          }
        },
        "timePicker": {
          "enabled": false,
          "step": 1,
          "hour": {
            "enabled": true,
            "step": null
          },
          "minute": {
            "enabled": true,
            "step": null
          },
          "second": {
            "enabled": true,
            "step": null
          },
          "meridian": {
            "enabled": true
          }
        },
        "dayPicker": {
          "enabled": true,
          "titleFormat": "YYYY MMMM"
        },
        "monthPicker": {
          "enabled": true,
          "titleFormat": "YYYY"
        },
        "yearPicker": {
          "enabled": true,
          "titleFormat": "YYYY"
        }
    });


  });
</script>