---
id:
  type: 'string'
class:
  type: 'string'
  default: 'form-control'
placeholder:
  type: 'string'
  default: ''
required:
  type: 'bool'
  default: false
autofocus:
  type: 'bool'
  default: false
name:
  type: 'string'
  default: ''
value:
  type: 'string'
  default: ''
attributes:
  type: 'string'
  default: ''
label:
  type: 'hash'
  default:
    es: 'Edad'
    en: 'Age'
    ar: 'Age'
---
{% assign age_attributes = attributes | append: ' ' | append: 'readonly data-dob-target="age"' %}
{% assign attributes = 'data-dob-target="date" data-action="dob#update"' %}
{% assign suffix = label[locale] | downcase | replace: ' ', '_' %}
{% if name contains ']' %}
  {% comment %}
    The extra space is a trick so we can recover the entire string because
    the replace_last implementation misses the search string if it's at
    the end of the string.
  {% endcomment %}
  {% assign age_name = name | append: ' ' | replace_last: ']', '_' | strip | append: suffix | append: ']' %}
  {% assign age_id = name | append: '_' | append: suffix | replace: '[', '_' | remove: ']' %}
{% else %}
  {% assign age_name = name | append: '_' | append: suffix %}
  {% assign age_id = id | append: '_' | append: suffix %}
{% endif %}

<div class="row row-cols-1 row-cols-md-2" data-controller="dob">
  <div class="col mb-3 mb-md-0">
    {% render 'forms/date.html', id:, name:, class:, placeholder:, required:, autofocus:, value:, attributes: %}
  </div>
  <div class="col">
    <div class="row no-gutters">
      {% block 'forms/label.html', id: age_id, class: 'col-2 col-form-label' %}
        {{- label[locale] -}}
      {% endblock %}

      <div class="col">
        {% render 'forms/input.html',
          id: age_id,
          name: age_name,
          class: 'form-control',
          type: 'text',
          attributes: age_attributes
        %}
      </div>
    </div>
  </div>
</div>