<div class="title_wrap">
  <img class="icon" dstoreCover="icon" [routerLink]="['/app', software.id]" [src]="software.info.icon" />
  <div class="title">
    <div dstoreTips class="name">{{ software.info.name?software.info.name: software.package.appName }}</div>
    <div class="size">{{ software.package.size | sizeHuman }}</div>
  </div>
</div>
<div class="score">
  <ng-container *ngIf="software.stat&&software.stat.score_count>=20; else $noneScore">
    <dstore-star [rate]="software.stat.score/2||0"></dstore-star>
    <span class="score_text">{{software.stat.score | appScore}}</span>
  </ng-container>
  <ng-template #$noneScore>
    <span class="score_none" i18n>No ratings</span>
  </ng-template>
</div>
<div class="log">
  <div class="log_content" [ngClass]="{log_content_none:!software.info.changelog||software.info.changelog==''}">
    <ng-container *ngIf="software.info.changelog&&software.info.changelog!='';else message">
      <div class="log_context">{{software.info.changelog}}</div>
    </ng-container>
  </div>
  <ng-container *ngIf="judgeOverflow$ | async">
    <span (click)="preDetail.toggle($event,false,{x:-2,y:5})" class="log_btn">
      <ng-container i18n>More</ng-container> 〉
    </span>
  </ng-container>
  <ng-template #message>
    <div class="log_context" i18n>No changelogs</div>
  </ng-template>
  <dstore-pre-detail [detail]="software.info.changelog" #preDetail>
  </dstore-pre-detail>
</div>
<ng-container *ngIf="job;else $info">
  <div class="progress">
    <my-update-progress [job]="job" [cancelled]="cancelled"></my-update-progress>
  </div>
  <div class="button">
    <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>
  </div>
</ng-container>
<ng-template #$info>
  <div class="progress">
    <div class="ignore">
      <div i18n>Ignore this version</div>
      <div class="longer" (click)="ignoreVersion()" i18n>Ignore all updates</div>
    </div>
    <div class="version_info">
      <div>
        <ng-container i18n>Current:</ng-container>
        {{software.package.localVersion}}
      </div>
      <div class="remote_version">
        <ng-container i18n>Available:</ng-container>
        {{software.package.remoteVersion}}
      </div>
    </div>
  </div>
  <div class="button">
    <ng-container *ngIf="sysAuthStatus$ | async;else $noAuthorizaedUpdateRef">
      <button (click)="update($event);" class="commit" i18n>Update</button>
    </ng-container>
    <ng-template #$noAuthorizaedUpdateRef>
      <button (click)="sysAuthMessage()" class="commit" i18n>Update</button>
    </ng-template>
  </div>
</ng-template>