<div class="card-wrapper">
  <div class="file-type-image" [ngStyle]="{'background-image': 'url('+ icon +')'}"></div>
  <kendo-card class="upload-card-content upload-thumb" [width]="'200px'"
              [ngStyle]="{'background-image' : 'url(' + thumbImage + ')'}">

    <kendo-card-header class="k-hbox">
      <p *ngIf="!IsDuplicate">  {{Operation}} <kendo-loader *ngIf="analyzing" size="small" type="converging-spinner"></kendo-loader></p>
      <p *ngIf="IsDuplicate">  Removing... <kendo-loader *ngIf="analyzing" size="small" type="converging-spinner"></kendo-loader> </p>
    </kendo-card-header>
    <kendo-card-body>
      <p class="FileName">
        {{ ( FileName.length > 17 ) ? (FileName | slice:0:17) + "..." : (FileName)}}
      </p>
      <p *ngIf="IsDuplicate"> This is Duplicate </p>
      <div *ngIf="!IsDuplicate" class="steps">
        <div>
          <kendo-icon *ngIf="!pdfSuccess" [name]="'file-pdf'" [themeColor]="'error'" class="k-badge-icon"></kendo-icon>
          <kendo-icon *ngIf="pdfSuccess" [name]="'check-circle'" [themeColor]="'success'" class="k-badge-icon"></kendo-icon>
          <span>
            <kendo-loader *ngIf="currentStep === 'pdf'" size="small" type="pulsing"></kendo-loader>
            1 pdf convert
          </span>
        </div>
        <div>
          <kendo-icon *ngIf="!previewSuccess" [name]="'file-config'" [themeColor]="'error'" class="k-badge-icon"></kendo-icon>
          <kendo-icon *ngIf="previewSuccess" [name]="'check-circle'" [themeColor]="'success'" class="k-badge-icon"></kendo-icon>
          <span>
            <kendo-loader *ngIf="currentStep === 'preview'" size="small" type="pulsing"></kendo-loader>
            2 preview
          </span>
        </div>
        <div>
          <kendo-icon *ngIf="!thumbSuccess" [name]="'file-txt'" [themeColor]="'error'" class="k-badge-icon"></kendo-icon>
          <kendo-icon *ngIf="thumbSuccess" [name]="'check-circle'" [themeColor]="'success'" class="k-badge-icon"></kendo-icon>
          <span>
            <kendo-loader *ngIf="currentStep === 'thumb'" size="small" type="pulsing"></kendo-loader>
            3 miniature
          </span>
        </div>

        <div>
          <kendo-icon *ngIf="!analysisSuccess" [name]="'file-ascx'" [themeColor]="'error'" class="k-badge-icon"></kendo-icon>
          <kendo-icon *ngIf="analysisSuccess" [name]="'check-circle'" [themeColor]="'success'" class="k-badge-icon"></kendo-icon>
          <span>
            <kendo-loader *ngIf="currentStep === 'analysis'" size="small" type="pulsing"></kendo-loader>
            4 construction
          </span>
        </div>
      </div>
      <div *ngIf="IsDuplicate" class="duplicate">DUP</div>
    </kendo-card-body>
    <kendo-card-footer>
      <div>
        <kendo-progressbar *ngIf=" Progress>0 && Progress <100" [value]="Progress" > </kendo-progressbar>
      </div>
    </kendo-card-footer>
  </kendo-card>

</div>
