{% set id = id|default("memorable-date") %}
{% set group_hint_id = id ~ "-hint" %}
{% set month_id = id ~ "-month" %}
{% set day_id = id ~ "-day" %}
{% set year_id = id ~ "-year" %}
{% set month_hint_id = month_id ~ "-hint" %}
{% set day_hint_id = day_id ~ "-hint" %}
{% set year_hint_id = year_id ~ "-hint" %}

<fieldset class="usa-fieldset">
  <legend class="usa-legend">Date of Birth</legend>
  <span class="usa-hint" aria-hidden="true" id="{{ group_hint_id }}">
    Select a month. Enter 1 or 2 digits for the day and 4 digits for the year.
  </span>
  <div class="usa-memorable-date">
    <div class="usa-form-group usa-form-group--month usa-form-group--select">
      <label class="usa-label" for="{{ month_id }}">Month</label>
      <span class="usa-hint usa-sr-only" id="{{ month_hint_id }}">Select a month from the dropdown.</span>
      <select class="usa-select" id="{{ month_id }}" name="{{ month_id }}" aria-describedby="{{ month_hint_id }}"
        {% if disabled_state == 'disabled' %} disabled
        {% elseif disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
      >
        <option value>- Select -</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
    <div class="usa-form-group usa-form-group--day">
      <label class="usa-label" for="{{ day_id }}">Day</label>
      <span class="usa-hint usa-sr-only" id="{{ day_hint_id }}">Enter 1 or 2 digits for the day.</span>
      <input class="usa-input" aria-describedby="{{ day_hint_id }}" id="{{ day_id }}" name="{{ day_id }}"
        maxlength="2" pattern="[0-9]*" inputmode="numeric" value="" 
        {% if disabled_state == 'disabled' %} disabled
        {% elseif disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
      />
    </div>
    <div class="usa-form-group usa-form-group--year">
      <label class="usa-label" for="{{ year_id }}">Year</label>
       <span class="usa-hint usa-sr-only" id="{{ year_hint_id }}">Enter 4 digits for the year.</span>
      <input class="usa-input" aria-describedby="{{ year_hint_id }}" id="{{ year_id }}" name="{{ year_id }}"
        minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric" value="" 
        {% if disabled_state == 'disabled' %} disabled
        {% elseif disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
      />
    </div>
  </div>
</fieldset>