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

{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False, initial_value='') -%}
  <textinput
    name='{{ field.name }}'
    validation='{{ validation }}'
    {% if paragraph %}paragraph='true'{% endif %}
    {% if initial_value or field.data %}initial-value='{{ initial_value or field.data }}'{% endif %}
    {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
    key='{{ field.name }}'
    inline-template>

    <div
      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph }]">

      <label for={{field.name}}>
        <div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>

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

        <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
        <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>

      </label>

      {% if paragraph %}

        <textarea
          v-on:input='onInput'
          v-on:change='onChange'
          v-bind:value='value'
          id='{{ 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'
          v-bind:aria-invalid='showError'
          id='{{ field.name }}'
          type='text'
          ref='input'
          placeholder='{{ placeholder }}'>
        </masked-input>

      {% endif %}

      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />

      <template v-if='showError'>
        <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
        <span v-if='!initialErrors' class='usa-input__message' v-html='validationError'></span>
      </template>

    </div>
  </textinput>
{%- endmacro %}