{%- from 'components/fieldset/macro.html' import tnaFieldset -%}

{% macro tnaDateInputDayElement(params) %}
<div class="tna-date-input__item tna-date-input__item--day">
  <label for="{{ params.id }}-day" class="tna-date-input__item-label">
    Day
  </label>
  <input type="text" id="{{ params.id }}-day" value="{{ params.value.day if params.value }}" name="{{ params.name }}-day" class="tna-date-input__item-input{% if params.classes %} {{ params.classes }}{% endif %}" inputmode="numeric"{%- if params.autofillDateOfBirth %} autocomplete="bday-day"{% endif %}{%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
</div>
{%- endmacro %}

{% macro tnaDateInputMonthElement(params) %}
<div class="tna-date-input__item tna-date-input__item--month">
  <label for="{{ params.id }}-month" class="tna-date-input__item-label">
    Month
  </label>
  <input type="text" id="{{ params.id }}-month" value="{{ params.value.month if params.value }}" name="{{ params.name }}-month" class="tna-date-input__item-input{% if params.classes %} {{ params.classes }}{% endif %}" inputmode="numeric"{%- if params.autofillDateOfBirth %} autocomplete="bday-month"{% endif %}{%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
</div>
{% endmacro %}

{% macro tnaDateInputYearElement(params) %}
<div class="tna-date-input__item tna-date-input__item--year">
  <label for="{{ params.id }}-year" class="tna-date-input__item-label">
    Year
  </label>
  <input type="text" id="{{ params.id }}-year" value="{{ params.value.year if params.value }}" name="{{ params.name }}-year" class="tna-date-input__item-input{% if params.classes %} {{ params.classes }}{% endif %} tna-date-input__item-input--wider" inputmode="numeric"{%- if params.autofillDateOfBirth %} autocomplete="bday-year"{% endif %}{%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
</div>
{% endmacro %}

{% macro tnaDateInput(params) %}
{%- call tnaFieldset({
  'headingLevel': params.headingLevel,
  'headingSize': params.headingSize,
  'id': params.id,
  'legend': params.label,
  'hint': params.hint,
  'smallerHint': True,
  'error': params.error,
  'classes': params.formItemClasses,
  'attributes': params.formItemAttributes
}) %}
  <div class="tna-date-input" id="{{ params.id }}"{%- if params.progressive %} data-module="tna-date-input-progressive"{% endif %}>
    {%- set fields = params.fields if params.fields else ['d', 'm', 'y'] -%}
    {%- if params.progressive %}
      {%- if params.fields %}
        {%- set fields = [] -%}
        {% if 'y' in params.fields %}
          {%- set fields = fields + ['y'] -%}
        {%- endif %}
        {% if 'm' in params.fields %}
          {%- set fields = fields + ['m'] -%}
        {%- endif %}
        {% if 'd' in params.fields %}
          {%- set fields = fields + ['d'] -%}
        {%- endif %}
      {%- else %}
        {%- set fields = ['y', 'm', 'd'] -%}
      {%- endif %}
    {%- endif %}
    {%- for field in fields %}
      {%- if field == 'd' %}
        {{ tnaDateInputDayElement(params) | indent(6) }}
      {%- elif field == 'm' %}
        {{ tnaDateInputMonthElement(params) | indent(6) }}
      {%- elif field == 'y' %}
        {{ tnaDateInputYearElement(params) | indent(6) }}
      {%- endif %}
    {%- endfor %}
  </div>
{%- endcall %}
{% endmacro %}