{% from "components/icon.html" import Icon %}

{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
  <textinput
    name='{{ field.name }}'
    validation='{{ validation }}'
    {% if field.data %}set-value='{{ field.data }}'{% endif %}
    inline-template>

    <div
      v-bind:class="['usa-input {% if field.errors %}usa-input--error{% endif %} usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">

      <label for={{field.name}}>
        {{ field.label }}
        {% if field.description %}
          <span class='usa-input__help'>{{ field.description | safe }}</span>
        {% endif %}

        {% if field.errors %}
          {{ Icon('alert') }}
        {% endif %}

        <template v-if='showError'>{{ Icon('alert') }}</template>
        <template v-if='showValid'>{{ Icon('ok') }}</template>

      </label>

      {% if paragraph %}

        <textarea
          v-on:input='onInput'
          v-on:change='onChange'
          v-bind:value='value'
          id='{{ field.name }}'
          name='{{ field.name }}'
          ref='input'
          placeholder='{{ placeholder }}'>
        </textarea>

      {% else %}

        <masked-input
          v-on:input='onInput'
          v-on:change='onChange'
          v-bind:value='value'
          v-bind:mask='mask'
          v-bind:pipe='pipe'
          v-bind:keep-char-positions='keepCharPositions'
          id='{{ field.name }}'
          name='{{ field.name }}'
          type='text'
          ref='input'
          placeholder='{{ placeholder }}'
          {% if field.errors %}aria-invalid='true'{% endif %}>
        </masked-input>

      {% endif %}

      {% if field.errors %}
        {% for error in field.errors %}
          <span class='usa-input__message'>{{ error }}</span>
        {% endfor %}
      {% endif %}
    </div>
</textinput>
{%- endmacro %}