<ng-template #loading>
  <div class="loadingContainer">
    <app-wait></app-wait>
  </div>
</ng-template>
<div class="list" *ngIf="result$ | async as result; else loading">
  <div class="title" *ngIf="result as jobs">
    <ng-container i18n>Processing {{ jobs.length }} {jobs.length, plural,=0 {task} =1 {task} other {tasks}}</
        ng-container>
  </div>
  <table>
    <ng-container *ngFor="let r of result; trackBy: trackByFn">
      <ng-container *ngIf="r.job as job">
        <tr *ngIf="r.soft as $app">
          <td>
            <img class="icon" dstoreCover="icon" [src]="$app.info.icon" [routerLink]="$app.id" />
          </td>
          <td>
            <div class="appInfo" [routerLink]="$app.id">
              <div dstoreTips class="name">{{ $app.info.name }}</div>
              <div class="version">
                <ng-container i18n>Version:</ng-container>{{ $app.package.remoteVersion }}
              </div>
            </div>
          </td>
          <td>
            <div class="time co-star">
              <span i18n>Time left: </span>
              <ng-container *ngIf="job.status === StoreJobStatus.running && job.speed; else $wait">
                <span *ngIf="((job.downloadSize * (1 - job.progress * 2)) / job.speed).toFixed(0) as $d; else $wait">
                  <ng-container *ngIf="$d >= 60">
                    <ng-container *ngIf="floor($d / 60) as $m" i18n>{{ $m }} min</ng-container>
                  </ng-container>
                  &nbsp;
                  <ng-container *ngIf="$d > 0; else $wait">
                    <ng-container *ngIf="floor($d % 60) as $s" i18n>{{ $s }} sec</ng-container>
                  </ng-container>
                </span>
              </ng-container>
              <ng-template #$wait> - - </ng-template>
            </div>
          </td>
          <td>
            <div class="progressInfo co-star">
              <progress [value]="job.progress" max="1"></progress>
              <ng-container *ngIf="job.speed as speed; else $msg">
                <ng-container *ngIf="job.progress as progress; else $msg">
                  <div class="speed"
                    *ngIf="job.type === StoreJobType.download && job.status === StoreJobStatus.running; else $msg">
                    <span *ngIf="job.downloadSize" class="size">
                      {{ job.downloadSize * job.progress * 2 | sizeHuman }} /
                      {{ job.downloadSize | sizeHuman }}
                    </span>
                    <span>{{ speed | sizeHuman }}/S</span>
                  </div>
                </ng-container>
              </ng-container>
              <ng-template #$msg>
                <div class="message" [class.failed]="job.status === StoreJobStatus.failed">
                  <ng-container *ngIf="job.type === StoreJobType.download" [ngSwitch]="job.status">
                    <ng-container *ngSwitchCase="StoreJobStatus.running" i18n>Waiting to download</ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.paused" i18n>Paused</ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.ready" i18n>Waiting to download</ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.failed">
                      <app-store-job-error [rowString]="job.description"></app-store-job-error>
                    </ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.end">
                      <ng-container *ngIf="cancelled.has(job.job); else downloaded" i18n>Cancelling</ng-container>
                      <ng-template #downloaded i18n>Downloaded</ng-template>
                    </ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.success" i18n>Downloaded</ng-container>
                    <ng-container *ngSwitchDefault>{{ job.status }}</ng-container>
                  </ng-container>
                  <ng-container *ngIf="job.type === StoreJobType.install" [ngSwitch]="job.status">
                    <ng-container *ngSwitchCase="StoreJobStatus.running" i18n>Installing</ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.paused" i18n>Paused</ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.ready" i18n>Waiting to install</ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.failed">
                      <app-store-job-error [rowString]="job.description"></app-store-job-error>
                    </ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.end">
                      <ng-container *ngIf="cancelled.has(job.job); else installed" i18n>Cancelling</ng-container>
                      <ng-template #installed i18n>Installed</ng-template>
                    </ng-container>
                    <ng-container *ngSwitchCase="StoreJobStatus.success" i18n>Installed</ng-container>
                    <ng-container *ngSwitchDefault>{{ job.status }}</ng-container>
                  </ng-container>
                </div>
              </ng-template>
            </div>
          </td>
          <td>
            <div class="controlBtn">
              <ng-container [ngSwitch]="true">
                <button class="pauseBtn" (click)="pause(job.job); $event.target.disabled = true" *ngSwitchCase="
                    [StoreJobStatus.running, StoreJobStatus.ready, StoreJobStatus.end].includes(job.status)
                  " [disabled]="!job.cancelable"></button>
                <button class="startBtn" (click)="start(job.job); $event.target.disabled = true"
                  *ngSwitchCase="job.status === StoreJobStatus.paused" [disabled]="!job.cancelable"></button>
                <button class="restartBtn" (click)="retry(job)" [disabled]="fixing"
                  *ngSwitchCase="job.status === StoreJobStatus.failed" [disabled]="!job.cancelable"></button>
              </ng-container>
              <button class="cancelBtn" [disabled]="!job.cancelable" (click)="cancel(job.job)"></button>
            </div>
          </td>
        </tr>
      </ng-container>
    </ng-container>
  </table>
</div>
