{# Django template for DateRangePicker #}
{% load components %}
<div
  class="usa-date-range-picker usx-date-range-picker{% if className %} {{ className }}{% endif %}"
  {% if minDate %} data-min-date="{{ minDate }}"{% endif %}
  {% if maxDate %} data-max-date="{{ maxDate }}"{% endif %}
>
  {% form_group error=startError %}
    {% if startLabel %}
    {% label id=startId|add:"-label" htmlFor=startId required=required error=startError %}{{ startLabel }}{% endlabel %}
    {% endif %}

    {% if startHint %}
    {% hint id=startId|add:"-hint" %}{{ startHint }}{% endhint %}
    {% endif %}

    {% if startError %}
    {% error_message id=startId|add:"-error" %}{{ startError }}{% enderror_message %}
    {% endif %}

    <div
      class="usa-date-picker usx-date-picker"
      {% if defaultStartDate %} data-default-value="{{ defaultStartDate }}"{% endif %}
    >
      <input
        class="usa-input usx-input"
        id="{{ startId }}"
        name="{{ startName|default:startId }}"
        {% if startLabel %} aria-labelledby="{{ startId }}-label"{% endif %}
        {% if startHint or startError %} aria-describedby="{% if startHint %}{{ startId }}-hint{% endif %}{% if startHint and startError %} {% endif %}{% if startError %}{{ startId }}-error{% endif %}"{% endif %}
        {% if disabled %} disabled{% endif %}
        {% if required %} required{% endif %}
      />
    </div>
  {% endform_group %}

  {% form_group error=endError %}
    {% if endLabel %}
    {% label id=endId|add:"-label" htmlFor=endId required=required error=endError %}{{ endLabel }}{% endlabel %}
    {% endif %}

    {% if endHint %}
    {% hint id=endId|add:"-hint" %}{{ endHint }}{% endhint %}
    {% endif %}

    {% if endError %}
    {% error_message id=endId|add:"-error" %}{{ endError }}{% enderror_message %}
    {% endif %}

    <div
      class="usa-date-picker usx-date-picker"
      {% if defaultEndDate %} data-default-value="{{ defaultEndDate }}"{% endif %}
    >
      <input
        class="usa-input usx-input"
        id="{{ endId }}"
        name="{{ endName|default:endId }}"
        {% if endLabel %} aria-labelledby="{{ endId }}-label"{% endif %}
        {% if endHint or endError %} aria-describedby="{% if endHint %}{{ endId }}-hint{% endif %}{% if endHint and endError %} {% endif %}{% if endError %}{{ endId }}-error{% endif %}"{% endif %}
        {% if disabled %} disabled{% endif %}
        {% if required %} required{% endif %}
      />
    </div>
  {% endform_group %}
</div>