{% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
  {% if (ctx.self.useWebViewCamera) { %}
    <div class="fileSelector bg-white">
      <button class="btn btn-primary" ref="galleryButton"><i class="fa fa-book"></i> {{ ctx.t('Gallery') }}</button>
      <button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ ctx.t('Camera') }}</button>
    </div>
  {% } else if (!ctx.self.cameraMode) { %}
    <div class="fileSelector bg-white" ref="fileDrop">
      <div class="align-center">
        {{ ctx.t('Drop files to attach, or') }}
        <button class="ml-1 mr-0 mb-0 btn btn-secondary" ref="fileBrowse">
          {{ ctx.t('Browse') }}
        </button>
      </div>
    </div>
  {% } else { %}
    <div>
      <video class="video" autoplay="true" ref="videoPlayer"></video>
    </div>
    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ ctx.t('Take Picture') }}</button>
    <button class="btn btn-primary" ref="toggleCameraMode">{{ ctx.t('Switch to file upload') }}</button>
  {% } %}
{% } %}
{% if (!ctx.component.storage || ctx.support.hasWarning) { %}
  <div class="alert alert-warning">
    {% if (!ctx.component.storage) { %}
      <p>{{ ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.') }}</p>
    {% } %}
    {% if (!ctx.support.filereader) { %}
      <p>{{ ctx.t('File API & FileReader API not supported.') }}</p>
    {% } %}
    {% if (!ctx.support.formdata) { %}
      <p>{{ ctx.t("XHR2's FormData is not supported.") }}</p>
    {% } %}
    {% if (!ctx.support.progress) { %}
      <p>{{ ctx.t("XHR2's upload progress isn't supported.") }}</p>
    {% } %}
  </div>
{% } %}

{% if (!ctx.self.imageUpload) { %}
  <table class="align-left mt-0 mb-2">
    <thead{% if ((ctx.files.length + ctx.statuses.length) === 0) { %} hidden{% } %}>
      <tr>
        <th class="col-md-{{ ctx.self.hasTypes ? 2 : 3 }}">
          {{ ctx.t('File name') }}
        </th>
        <th class="col-md-2 text-align-right">
          {{ ctx.t('Size') }}
        </th>
        {% if (ctx.self.hasTypes) { %}
          <th class="col-md-2">
            {{ ctx.t('Type') }}
          </th>
        {% } %}
        {% if (!ctx.disabled) { %}
          <th><!-- actions --></th>
        {% } %}
      </tr>
    </thead>
    <tbody>
      {% ctx.files.forEach(function(file) { %}
        <tr>
          <td class="filename bg-green-1" style="white-space: nowrap; overflow: hidden;">
            {% if (ctx.component.uploadOnly) { %}
              {{ file.originalName || file.name }}
            {% } else { %}
              <div class="flex items-center">
                <div data-icon="check" class="flex fg-green-3 mr-1"></div>
                <span style="text-overflow: ellipsis;">{{file.originalName || file.name}}</span>
              </div>
            {% } %}
          </td>
          <td class="size text-align-right bg-green-1">
            {{ ctx.fileSize(file.size) }}
          </td>
          {% if (ctx.self.hasTypes) { %}
            <td class="">
              {% if (ctx.disabled) { %}
                {{ file.fileType }}
              {% } else { %}
                <select class="file-type" ref="fileType">
                  {% ctx.component.fileTypes.forEach(function(type) { %}
                    <option
                      value="{{ type.value }}"
                      {% if (type.label === file.fileType) { %}selected="selected" {% } %}
                    >{{ type.label }}</option>
                  {% }) %}
                </select>
              {% } %}
            </td>
          {% } %}
          <td class="remove text-align-right pr-0">
            {% if (!ctx.disabled) { %}
              <button ref="removeLink" aria-label="{{ ctx.t('Remove') }}"
                class="btn p-8 bg-slate flex items-center"
              >
                <span data-icon="delete" class="flex items-center"></span>
              </button>
            {% } %}
          </td>
        </tr>
      {% }) %}

      {% ctx.statuses.forEach(function(status) { %}
        {% if (status.status === 'progress') { %}
          <tr>
            <td class="filename">
              {{ status.originalName }}
            </td>
            <td class="size text-align-right">
              {{ status.progress }}% of {{ ctx.fileSize(status.size) }}
            </td>
            <td class="remove text-align-right pr-0">
              {% if (!ctx.disabled) { %}
                <button ref="fileStatusRemove" aria-label="{{ ctx.t('Remove') }}"
                  class="btn p-8 bg-slate flex items-center">
                  <span data-icon="delete" class="flex items-center"></span>
                </button>
              {% } %}
            </td>
          </tr>
        {% } %}
      {% }) %}
    </tbody>
  </table>

  {% ctx.statuses.forEach(function(status) { %}
    {% if (status.status === 'error' || status.status === 'warning') { %}
      <div class="status-error bg-red-4 fg-white round-1">
        {{ ctx.t('There was an error uploading the file.') }}
      </div>
    {% } %}
  {% }) %}
{% } %}