{% extends 'forms/base_widget.html' %}

{% block html %}
    <div class="date-widget">
        {# the hidden field has autofocus on purpose to prevent our JS from focusing the date picker #}
        <input type="hidden" name="{{ field.name }}" id="{{ field.id }}-datestorage" autofocus
               {% if field.data and not field.date_missing %}value="{{ field.data.isoformat() }}"{% endif %}
               {{ input_args | html_params }}>
        <span id="{{ field.id }}"></span>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        setupDateWidget({
            fieldId: {{ field.id | tojson }},
            required: {{ input_args.required | default(false) | tojson }},
            disabled: {{ input_args.disabled | default(false) | tojson }},
            allowClear: {{ (field.allow_clear if field.allow_clear else false) | tojson }},
            earliest: {{ (field.earliest_date.isoformat() if field.earliest_date else none) | tojson }},
            latest: {{ (field.latest_date.isoformat() if field.latest_date else none) | tojson }},
            disabledDays: {{ field.disabled_days_js | tojson }},
            disabledDates: {{ field.disabled_dates | tojson }},
            {% if field.flags.linked_date %}
                linkedField: {
                    id: {{ field.get_form()[field.linked_field].id | tojson }},
                    notBefore: {{ field.linked_date_validator.not_before | tojson }},
                    notAfter: {{ field.linked_date_validator.not_after | tojson }}
                }
            {% else %}
                linkedField: null
            {% endif %}
        });
    </script>
{% endblock %}
