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

{% macro UploadInput(field, portfolio_id, file_size_limit, show_label=False) -%}
<uploadinput
  inline-template
  {% if not field.errors %}
    v-bind:filename='{{ field.filename.data | tojson }}'
    v-bind:initial-object-name='{{ field.object_name.data | tojson }}'
  {% else %}
    v-bind:initial-errors='true'
  {% endif %}
  v-bind:portfolio-id="'{{ portfolio_id }}'"
  name='{{ field.name }}'
  v-bind:size-limit='{{ file_size_limit }}'
  >
  <div>
    <div v-show="valid" class="uploaded-file">
      {{ Icon("ok") }}
      <a class="uploaded-file__name" v-text="baseName" v-bind:href="downloadLink"></a>
      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
    </div>
    <div v-show="valid === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
      {% if show_label %}
        {{ field.label }}
      {% endif %}
      <p>
        <!-- TODO: fix this to use field.description -->
        <!-- This was temporarily hard coded because we were unable to use
        app.config['FILE_SIZE_LIMIT'] in TaskOrderForm field descriptions and labels -->
        {% set size_limit = file_size_limit // 1000000 %}
        {{ "task_orders.form.supporting_docs_size_limit" | translate({ "file_size_limit": size_limit }) }}
      </p>
      <div v-if="!hideInput" class="upload-widget">
        <label class="upload-label" :for="name">
          <span class="upload-button">
            Browse
          </span>
        </label>
        <input
          v-on:change="addAttachment"
          ref="attachmentInput"
          accept="{{ field.accept }}"
          :id="name"
          :name="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" v-bind:value='objectName'>
      </div>
      <template v-if="uploadError">
        <span class="usa-input__message">{{ "forms.task_order.upload_error" | translate }}</span>
      </template>
      <template v-if="sizeError">
        <span class="usa-input__message">{{ "forms.task_order.size_error" | translate({"file_size_limit": (file_size_limit//1000000)}) }}</span>
      </template>
      <template v-if="filenameError">
        <span class="usa-input__message">{{ "forms.task_order.filename_error" | translate }}</span>
      </template>
      {% for error, error_messages in field.errors.items() %}
        <span class="usa-input__message">{{error_messages[0]}}</span>
      {% endfor %}
    </div>
  </div>
</uploadinput>
{%- endmacro %}