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

{% macro UploadInput(field, show_label=False, watch=False, token="", object_name="") -%}
<uploadinput
  inline-template
  {% if not field.errors %}
    v-bind:initial-data='{{ field.filename.data | tojson }}'
  {% else %}
    v-bind:initial-errors='true'
  {% endif %}
  v-bind:watch='{{ watch | string | lower }}'
  name='{{ field.name }}'
  :optional='false'
  v-bind:token='{{ token | tojson }}'
  v-bind:object-name='"{{ object_name | string }}"'
  >
  <div>
    <div v-show="hasAttachment" class="uploaded-file">
      {{ Icon("check-circle-solid") }}
      <span class="uploaded-file__name" v-html="baseName"></span>
      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
    </div>
    <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
      {% if show_label %}
        {{ field.label }}
      {% endif %}
      {{ field.description }}
      <div v-if="!hideInput" class="upload-widget">
        <label class="upload-label" for="{{ field.name }}">
          <span class="upload-button">
            Browse
          </span>
          {% if field.errors %}
            <span v-show="showErrors">{{ Icon('alert',classes="icon-validation") }}</span>
          {% endif %}
        </label>
        <input
          v-on:change="addAttachment"
          ref="attachmentInput"
          accept="{{ field.accept }}"
          id="{{ field.name }}"
          name="{{ field.name }}"
          aria-label="Task Order Upload"
          v-bind:value="attachment"
          type="file">
          <input type="hidden" name="{{ field.filename.name }}" id="{{ field.filename.name }}" ref="attachmentFilename">
          <input type="hidden" name="{{ field.object_name.name }}" id="{{ field.object_name.name }}" ref="attachmentObjectName">
      </div>
      {% for error, error_message in field.errors.items() %}
        <span v-show="showErrors" class="usa-input__message">{{error_message}}</span>
      {% endfor %}
    </div>
  </div>
</uploadinput>
{%- endmacro %}