<div class="attached-file-url">
  <div class="preview">
    <span class="mdi mdi-{{ file.icon }} file-{{ file.icon }}"></span>
    <div class="details">
      <div class="mat-small">
        <span translate>File</span>:
        <span class="file-name">{{ file.fullName }}</span>
      </div>
      <div class="mat-small" translate>
        <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
              [matTooltip]="'Verified file path' | translate"
              color="primary"
              >check_circle</mat-icon
            ></span
          >
          <span *ngIf="isLoaded && !isFileValid && !fileCheckError"
            ><mat-icon [matTooltip]="'File not found' | translate" color="warn"
              >error</mat-icon
            ></span
          >
          <span *ngIf="isLoaded && fileCheckError"
            ><mat-icon
              [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()"
            ><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>
