<div class="d-flex a-i-center gap-8">
  <div *ngIf="!currentValue else fileSelected" class="d-contents">
    <i c8yIcon="no-image" class="icon-48 text-muted"></i>
    <p class="m-r-auto text-muted"><em translate>No file selected.</em></p>
  </div>

  <ng-template #fileSelected>
    <c8y-loading *ngIf="loading"></c8y-loading>
    <div *ngIf="!loading && !currentFile">
      <p translate>Unable to locate file: "{{ currentValue }}"</p>
    </div>

    <div *ngIf="!loading && currentFile" style="min-height: 48px" class="d-flex a-i-center">
      <img *ngIf="currentFile" [src]="currentFile.path" class="img-responsive" [ngStyle]="{'width.px': size}" alt="{{currentFile?.fileName }}">
    </div>
    <span class="text-truncate" title="{{ currentFile?.fileName || currentValue }}">{{ currentFile?.fileName || currentValue }}</span>
    <button class=" m-l-auto btn btn-dot btn-dot--danger"
      type="button" (click)="clear()"
      [delay]="500"
      [attr.aria-label]="'Remove' | translate"
      placement="top"
      tooltip="{{'Remove' | translate}}">
      <i c8yIcon="minus-circle"></i>
    </button>
  </ng-template>

  <button (click)="openFilePicker()" class="btn btn-default btn-sm">
    <span *ngIf="!currentFile">
      {{'Select' | translate}}
    </span>
    <span *ngIf="currentFile">
      {{'Replace' | translate}}
    </span>
  </button>
</div>