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

{% macro TextInput(
  field,
  label=field.label | striptags,
  description=field.description,
  tooltip='',
  tooltip_title='Help',
  placeholder='',
  validation='anything',
  paragraph=False,
  disabled=False,
  initial_value='',
  classes='',
  noMaxWidth=False) -%}

  <textinput
    v-cloak
    name='{{ field.name }}'
    validation='{{ validation }}'
    {% if paragraph %}paragraph='true'{% endif %}
    {% if noMaxWidth %}no-max-width='true'{% endif %}
    {% if initial_value or field.data is not none %}initial-value='{{ initial_value or field.data }}'{% endif %}
    {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
    key='{{ field.name }}'
    inline-template>

    <div
      class='{% if disabled %}input--disabled{% endif %} {{ classes }}'
      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">

      <label for={{field.name}}>
        <div class="usa-input__title">
          {{ label }}
          {% if tooltip and not disabled %}
            {{ Tooltip(tooltip, tooltip_title) }}
          {% endif %}
        </div>

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

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

      </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:blur='onBlur'
          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'
          {% if disabled %}
          disabled="disabled"
          readonly="readonly"
          {% endif %}
          ref='input'
          placeholder='{{ placeholder }}'>
        </masked-input>

      {% endif %}

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

      <template v-if='showError'>
        <span class='usa-input__message' v-html='validationError'></span>
      </template>
      <template v-else>
        <span class='usa-input__message'></span>
      </template>

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