<div
  class="uploaded-image-preview input-xxlarge"
  style={{this.backgroundStyle}}
>
  {{#if this.showingPlaceholder}}
    <div class="placeholder-overlay" style={{this.placeholderStyle}}></div>
  {{/if}}
  <div class="image-upload-controls">
    <label
      class="btn btn-default pad-left no-text {{if this.disabled 'disabled'}}"
      title={{this.disabledReason}}
    >
      {{d-icon "far-image"}}
      <PickFilesButton
        @fileInputDisabled={{this.disabled}}
        @fileInputClass="hidden-upload-field"
        @acceptedFormatsOverride="image/*"
      />
    </label>

    {{#if this.imageUrl}}
      <DButton
        @action={{action "trash"}}
        @class="btn-danger pad-left no-text"
        @icon="far-trash-alt"
        @type="button"
      />

      <DButton
        @icon="discourse-expand"
        @title="expand"
        @type="button"
        @class="image-uploader-lightbox-btn no-text"
        @action={{action "toggleLightbox"}}
        @disabled={{this.loadingLightbox}}
      />
    {{/if}}

    <span class="btn {{unless this.uploading 'hidden'}}">{{i18n
        "upload_selector.uploading"
      }}
      {{this.uploadProgress}}%</span>
    <span class="btn {{unless this.processing 'hidden'}}">{{i18n
        "upload_selector.processing"
      }}</span>
  </div>

  {{#if this.imageUrl}}
    <a
      class="lightbox"
      href={{this.imageCDNURL}}
      title={{this.imageFilename}}
      rel="nofollow ugc noopener"
    >

      <div class="meta">
        <span class="informations">
          {{this.imageWidth}}x{{this.imageHeight}}
          {{this.imageFilesize}}
        </span>
      </div>
    </a>
  {{/if}}
</div>