<div class="attached-file-url">
  <div class="preview">
    <div *ngIf="img0" class="result-thumbnail" (click)="openFile()">
      <app-blob-viewer [blob]="img0" type="image"></app-blob-viewer>
    </div>
    <span *ngIf="!img0" class="big-mdi mdi mdi-{{ file.icon }} file-{{ file.icon }}"></span>
    <div class="details">
      <div class="mat-small">
        <span translate>File</span>:
        <span class="mdi mdi-{{ file.icon }} file-{{ file.icon }}"></span>
        <span class="file-name">{{ file.fullName }}</span>
      </div>
      <div class="mat-small" *ngIf="!isDir">
        <span translate>Size</span>:
        <span *ngIf="isLoaded && isFileValid">{{ file.size | formatBytes }}</span>
        <span *ngIf="!isLoaded || !isFileValid" translate>unknown</span>
      </div>
      <div class="actions">
        <div class="mat-small room-data" *ngIf="roomData">
          <span translate>From</span>: <app-avatar [blob]="roomData.data.avatar"></app-avatar><span>{{ roomData.data.name }}</span>
        </div>
        <div class="mat-small room-data" *ngIf="!roomData">
          <span translate>Unknown Room</span>
        </div>
        <div>
          <span *ngIf="isLoaded && isFileValid && !fileCheckError"
            ><mat-icon #tooltipFilePath="matTooltip" (click)="tooltipFilePath.toggle()" [matTooltip]="'Verified file path' | translate" color="primary">check_circle</mat-icon></span
          >
          <span *ngIf="isLoaded && !isFileValid && !fileCheckError"
            ><mat-icon #tooltipFileNotFound="matTooltip" (click)="tooltipFileNotFound.toggle()" [matTooltip]="'File not found' | translate" color="warn">error</mat-icon></span
          >
          <span *ngIf="isLoaded && fileCheckError"
            ><mat-icon
              #tooltipError="matTooltip"
              (click)="tooltipError.toggle()"
              [matTooltip]="'Could not check the file. It can be a request error or the current Nano version is not support the file peek operation.' | translate"
              color="warn"
              >warning</mat-icon
            ></span
          >
          <span (click)="download()" *ngIf="!isDir"><mat-icon [matTooltip]="'Download file' | translate">download</mat-icon></span>
          <span (click)="openPath()"><mat-icon [matTooltip]="'Navigate to the file' | translate">open_in_new</mat-icon></span>
        </div>
      </div>
    </div>
  </div>
  <mat-progress-bar *ngIf="downloadProgress > 0" mode="determinate" [value]="downloadProgress"></mat-progress-bar>
</div>
