{% from "components/icon.html" import Icon %}

{% macro DatePicker(
  field,
  label=field.label | striptags,
  description=field.description,
  mindate=None,
  maxdate=None) -%}

<date-selector
  {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
  {% if mindate %}mindate="{{ mindate.strftime("%Y-%m-%d") }}"{% endif %}
  initialmonth="{{ field.data.month }}"
  initialday="{{ field.data.day }}"
  initialyear="{{ field.data.year }}"
  inline-template>

    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
      <legend>
        <div class="usa-input__title">
          {{ label }}
        </div>

        {% if description %}
          <span class='usa-input__help'>{{ description | safe }}</span>
        {% endif %}
      </legend>

      <div class="date-picker-component">
        <input name="{{ field.name }}" v-bind:value="formattedDate" type="hidden" />

        <div class="usa-form-group usa-form-group-month">
          <label>Month</label>
          <input
            name="date-month"
            max="12"
            maxlength="2"
            min="1"
            type="number"
            v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
            v-model="month"
          />
        </div>

        <div class="usa-form-group usa-form-group-day">
          <label>Day</label>
          <input
            name="date-day"
            maxlength="2"
            min="1"
            type="number"
            v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
            v-bind:max="daysMaxCalculation"
            v-model="day"
          />
        </div>

        <div class="usa-form-group usa-form-group-year">
          <label>Year</label>
          <input
            id="date-year"
            maxlength="4"
            type="number"
            v-model="year"
            {% if maxdate %}max="{{ maxdate.year }}"{% endif %}
            {% if mindate %}min="{{ mindate.year }}"{% endif %}
          />

        </div>

        <div class="usa-form-group-date-ok" v-if="isDateValid">
          {{ Icon("ok", classes="icon--green") }}
        </div>
      </div>

      <p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
        {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
        {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
        {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
      </p>
    </fieldset>
  </date-selector>

{%- endmacro %}