{% from "../error-message/macro.njk" import moalandErrorMessage -%}
{% from "../hint/macro.njk" import moalandHint %}
{% from "../label/macro.njk" import moalandLabel %}

{#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
{% set describedBy = params.describedBy if params.describedBy else "" %}
<div class="moaland-form-group {%- if params.errorMessage %} moaland-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
  {{ moalandLabel({
    html: params.label.html,
    text: params.label.text,
    classes: params.label.classes,
    isPageHeading: params.label.isPageHeading,
    attributes: params.label.attributes,
    for: params.id
  }) | indent(2) | trim }}
{% if params.hint %}
  {% set hintId = params.id + '-hint' %}
  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
  {{ moalandHint({
    id: hintId,
    classes: params.hint.classes,
    attributes: params.hint.attributes,
    html: params.hint.html,
    text: params.hint.text
  }) | indent(2) | trim }}
{% endif %}
{% if params.errorMessage %}
  {% set errorId = params.id + '-error' %}
  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
  {{ moalandErrorMessage({
    id: errorId,
    classes: params.errorMessage.classes,
    attributes: params.errorMessage.attributes,
    html: params.errorMessage.html,
    text: params.errorMessage.text,
    visuallyHiddenText: params.errorMessage.visuallyHiddenText
  }) | indent(2) | trim }}
{% endif %}

{%- if params.prefix or params.suffix %}<div class="moaland-input__wrapper">{% endif -%}

  {%- if params.prefix.text or params.prefix.html %}
    <div class="moaland-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
      {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
    </div>
  {% endif -%}

  <input class="moaland-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} moaland-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
  {%- if params.value %} value="{{ params.value}}"{% endif %}
  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>

  {%- if params.suffix.text or params.suffix.html %}
    <div class="moaland-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
      {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
    </div>
  {% endif -%}

{%- if params.prefix or params.suffix %}</div>{% endif %}
</div>