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

{% macro UploadInput(field, show_label=False) -%}
<uploadinput inline-template v-bind:initial-data='{{ field.data | tojson }}' v-bind:upload-errors='{{ field.errors | list }}'>
  <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" class="usa-input {% if field.errors %} usa-input--error {% endif %}">
      {% if show_label %}
        {{ field.label }}
      {% endif %}
      {{ field.description }}
      <div class="upload-widget">
        <label class="upload-label" for="{{ field.name }}">
          <span class="upload-button">
            Browse
          </span>
        </label>
        <input
          v-on:change="addAttachment"
          ref="attachmentInput"
          accept="{{ field.accept }}"
          id="{{ field.name }}"
          name="{{ field.name }}"
          aria-label="Task Order Upload"
          type="file">
      </div>
      {% for error in field.errors %}
        <span class="usa-input__message">{{error}}</span>
      {% endfor %}
    </div>
  </div>
</uploadinput>
{%- endmacro %}