<div class="manager-file-container">
  <div [ngClass]="{ 'manager-file-preview': true, done: isUploading }" (click)="openPath()">
    <span class="mdi mdi-{{ file.file.icon }} file-{{ file.file.icon }}"></span>
  </div>
  <div class="manager-file-status">
    <div class="manager-file-info">
      <div [ngClass]="{ 'manager-file-title': true, 'mat-small': true, done: !isUploading }" (click)="openPath()">
        {{ file.file.fullName }}
      </div>
      <div class="manager-file-progress mat-small" *ngIf="!file.done">{{ file.timeNeeded }} -</div>
      <div class="manager-file-progress mat-small" *ngIf="!file.done">( {{ file.currPart * chunkSizeM | formatBytes: 1 }} / {{ file.file.size | formatBytes }} )</div>
      <mat-icon class="manager-file-direction" *ngIf="!file.done && file.direction === 'down'">arrow_downward</mat-icon>
      <mat-icon class="manager-file-direction" *ngIf="!file.done && file.direction === 'up'">arrow_upward</mat-icon>
    </div>
    <div class="manager-file-info">
      <div [ngClass]="{ 'manager-file-room': true, 'mat-small': true, done: !isUploading }" (click)="openPath()">
        <app-avatar *ngIf="roomData" [blob]="roomData.data.avatar"></app-avatar><span *ngIf="roomData">{{ roomData.data.name }}</span>
      </div>
      <span class="mat-small manager-file-time" *ngIf="!file.done">{{ file.speed }}</span>
    </div>
    <div class="manager-file-bar" *ngIf="!file.done">
      <mat-progress-bar mode="determinate" [value]="file.progress"></mat-progress-bar>
    </div>
  </div>
  <div class="manager-file-progress mat-small" *ngIf="file.done">
    {{ file.file.size | formatBytes }}
  </div>
  <mat-icon class="manager-file-direction" *ngIf="file.done && file.direction === 'down'">arrow_downward</mat-icon>
  <mat-icon class="manager-file-direction" *ngIf="file.done && file.direction === 'up'">arrow_upward</mat-icon>
  <div class="manager-file-action">
    <mat-icon color="warn" *ngIf="file.error" (click)="pause(); resume()" [matTooltip]="'Error occured during the process' | translate">error</mat-icon>

    <mat-icon *ngIf="file.done || file.paused" (click)="remove()" [matTooltip]="'Remove the element from the list' | translate">delete</mat-icon>
    <mat-icon *ngIf="canShowAsImage && ((file.done && file.objectURL) || file.direction === 'up')" (click)="toggleViewer()" [matTooltip]="'Show/hide the preview of the image' | translate"
      >image_search</mat-icon
    >

    <mat-icon *ngIf="!file.done && !file.paused" (click)="pause()" [matTooltip]="'Pause the operation' | translate">pause</mat-icon>
    <mat-icon *ngIf="!file.done && file.paused" (click)="resume()" [matTooltip]="'Resume the operation' | translate">play_arrow</mat-icon>
    <mat-icon *ngIf="file.done && file.objectURL" (click)="redownload()" [matTooltip]="'Get the downloaded file again' | translate">download</mat-icon>
    <mat-icon *ngIf="isOnApp && file.done && file.direction === 'down'" (click)="open()" [matTooltip]="'Open file' | translate">input</mat-icon>
    <!--<mat-icon *ngIf="file.done" [matTooltip]="'Get the downloaded file again' | translate">done</mat-icon>-->
  </div>
</div>
<div class="preview" *ngIf="showPreview && ((file.done && file.objectURL) || file.direction === 'up') && canShowAsImage">
  <img [src]="safeBlobURL" />
</div>
