<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 || isPaused"
      (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 && !isPaused"
      (click)="pause()"
      [matTooltip]="'Pause the operation' | translate"
      >pause</mat-icon
    >
    <mat-icon
      *ngIf="!file.done && isPaused"
      (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="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>
