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

{% macro OptionsInput(
  field,
  tooltip,
  inline=False,
  label=True,
  show_validation=True,
  disabled=False,
  optional=True) -%}
  <optionsinput
    name='{{ field.name }}'
    inline-template
    {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
    {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
    key='{{ field.name }}'
    v-bind:optional={{ optional|lower }}
    v-bind:null-option="'{{ field.default }}'"
    >
    <div
      v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">

      <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
        {% if label %}
          <legend>
            <div class="usa-input__title{% if not field.description %}-inline{% endif %}">
              {{ field.label | striptags}}
              {% if optional %}
                <span class="usa-input-label-helper">{{ "common.optional" | translate }}</span>
              {% endif %}
              {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
            </div>

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

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

        {{ field(disabled=disabled) }}

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

      </fieldset>
    </div>

  </optionsinput>

{%- endmacro %}