<ng-container *ngIf="imageDetails$ | async as details; else empty">
  <img
    [src]="details.base64"
    [title]="details.file.name"
    [ngClass]="styling ? 'fit-h fit-w' : 'img-responsive'"
    [ngStyle]="styling"
  />
</ng-container>

<ng-template #empty>
  <div class="d-flex fit-h fit-w j-c-center a-i-center" *ngIf="!loading">
    <c8y-ui-empty-state
      class="fit-w"
      [icon]="'no-image'"
      [title]="'No image to display.' | translate"
      [subtitle]="'Upload an image.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  </div>
</ng-template>
<div class="d-flex fit-h fit-w j-c-center a-i-center" *ngIf="loading">
  <c8y-loading></c8y-loading>
</div>