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

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

<date-selector
  {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
  {% if mindate %}mindate="{{ mindate.strftime("%Y-%m-%d") }}"{% endif %}
  name-tag='{{ field.name }}'
  initialmonth="{{ field.data.month }}"
  initialday="{{ field.data.day }}"
  initialyear="{{ field.data.year }}"
  :optional='{{ optional | string | lower }}'
  inline-template>

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

        {% if caller %}
          {{ caller() }}
        {% endif %}

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

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

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

        <div class="usa-form-group usa-form-group-day">
          <label>{{ 'components.date_selector.day' | translate }}</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"
            v-on:change="onInput"
          />
        </div>

        <div class="usa-form-group usa-form-group-year">
          <label>{{ 'components.date_selector.year' | translate }}</label>
          <input
            id="date-year"
            maxlength="4"
            type="number"
            v-model="year"
            {% if maxdate %}max="{{ maxdate.year }}"{% endif %}
            {% if mindate %}min="{{ mindate.year }}"{% endif %}
            v-on:change="onInput"
          />

        </div>

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

{%- endmacro %}