{#
  A collection of form components including labels, prefix, suffix, help text, etc..

  - description_display: Description display setting. It can have these values:
    - before: The description is output before the element.
    - after: The description is output after the element. This is the default
      value.
    - invisible: The description is output after the element, hidden visually
      but available to screen readers.
  - label_display: Label display setting. It can have these values:
    - before: The label is output before the element. This is the default.
      The label includes the #title and the required marker, if #required.
    - after: The label is output after the element. For example, this is used
      for radio and checkbox #type elements. If the #title is empty but the
      field is #required, the label will contain only the required marker.
    - invisible: Labels are critical for screen readers to enable them to
      properly navigate through forms but can be visually distracting. This
      property hides the label for everyone except screen readers.
  - errors: (optional) Any errors for this form element, may not be set.
  - prefix: (optional) The form element prefix, may not be set.
  - suffix: (optional) The form element suffix, may not be set.
  - required: The required marker, or empty if the associated form element is
    not required.
  - form_item_modifier: Classes used to modify and provide variants.
  - type: The type of the element.
  - name: The name of the element.
  - label: A rendered label element.
  - description: (optional) A list of description properties containing:

#}


{%
  set description_classes = [
    'description',
    description_display == 'invisible' ? 'mds-visually-hidden',
  ]
%}

{#
  TODO: Make available a label accessible to screen readers.
  We need to apply a hide class on the label not remove it.
#}
<div class="mds-form-item {{ form_item_modifier }}">
  {% if label_display in ['before', 'invisible']  and type not in ['submit', 'reset'] %}
    <label class="{{  label_display in ['invisible']? 'mds-visually-hidden': ''}}" for="{{ id }}">{{ label }}</label>
  {% endif %}
  {% if prefix is not empty %}
    <span class="field-prefix">{{ prefix }}</span>
  {% endif %}
  {% if description_display == 'before' and description %}
    <div class="mds-form-item--hint">
      {{ description }}
    </div>
  {% endif %}

  {# Include input component w/ mds namespace. #}
  {% include '@mds/form_elements/input.twig' %}

  {% if suffix is not empty %}
    <span class="field-suffix">{{ suffix }}</span>
  {% endif %}
  {% if label_display == 'after' %}
    <label class="{{  label_display in ['invisible']? 'mds-visually-hidden': ''}}" for="{{ id }}">{{ label }}</label>
  {% endif %}
  {% if errors %}
    <div class="mds-form-item--error-message">
      {{ errors }}
    </div>
  {% endif %}
  {% if description_display in ['after', 'invisible'] and description %}
    <div class="mds-form-item--hint">
      {{ description }}
    </div>
  {% endif %}
</div>