{{#if photoPreview}}

<div class="column is-12">
  <a {{action showImagePreview item.dataURI}} class="upload-camera-preview-item {{if isActive "is-active"}} box has-text-centered">
    <img src={{item.dataURI}}>
    {{#if progressBarStatus}}
    <div class="upload-item-progress {{progressBarStatus}}">
      <progress class="progress is-primary" value="{{item.progress}}" max="100">{{item.progress}}%</progress>
    </div>
    {{/if}}
    <span class="icon is-medium">
      <i class="fa fa-times-circle"></i>
    </span>
  </a>
</div>

{{else}}

  <div class="column is-12 upload-item {{statusClass}} {{if item.isDeleting "is-deleting"}}">
    <div class="box">
      <div class="columns align-items-center">
        <div class="column status-icon">
          <div class="columns is-mobile align-items-center has-text-centered-mobile">
            <div class="column is-narrow upload-status-icon">
              <span class="fa-stack {{statusClass}}">
                <i class="fa fa-file-o fa-stack-2x"></i>
                <i class="fa {{icon}} fa-stack-1x"></i>
              </span>
            </div>
            <div class="column has-overflow-hidden">{{item.file.name}}</div>
          </div>
        </div>
        {{#if item.error}}
          <div class="column has-text-right has-text-centered-mobile">
            <span class="upload-item-error">
              {{item.error}}
            </span>
          </div>
        {{/if}}

        <div class="column is-narrow has-text-right has-text-centered-mobile">

          {{#if isUploaded}}
            <a {{action 'remove' item.index item}} disabled={{item.isDeleting}} class="button is-danger is-outlined {{if item.isDeleting "is-loading"}}">
              <span>Remove</span>
              <span class="icon is-small">
                <i class="fa fa-trash"></i>
              </span>
            </a>
          {{/if}}

          {{#if isFailedUploading}}
            <a {{action retryItem}} class="button is-primary is-outlined ">
              <span>Try Again</span>
              <span class="icon is-small">
                <i class="fa fa-refresh"></i>
              </span>
            </a>
          {{/if}}

          {{#if isUploading}}
            <span class="icon is-large">
              <i class="fa fa-circle-o-notch fa-spin"></i>
            </span>
          {{/if}}

        </div>
      </div>
    </div>
  </div>

{{/if}}