<dp-circle *ngIf="job$ | async as job; else controlRef" [value]="job.progress">
  <div class="circle-control" [class.disabled]="!job.cancelable"
    [class.running]="job.status !== JobStatus.paused && job.status !== JobStatus.failed" (click)="trigger($event, job)">
  </div>
</dp-circle>

<ng-template #controlRef>
  <!-- isCheck SysAuth -->
  <!-- Authorizaed -->
  <ng-container *ngIf="sysAuthStatus$ | async; else noAuthorizaedRef">
    <ng-container
      *ngIf="storeMode!== this.StoreMode.IntranetAppStore||(noIntranetAuth$ | async); else noAuthorizaedRef">
      <ng-container *ngIf="!soft.free && !(userAppIDs$ | async)?.includes(soft.id); else openRef">
        <button class="control" (click)="buyApp($event); buyButtonRef.hidden = true" hidden #buyButtonRef>
          <ng-container i18n>Buy</ng-container>
        </button>
        <button class="control price" (click)="buyButtonRef.hidden = false" *ngIf="buyButtonRef.hidden">
          {{ soft?.pricing?.price / 100 | currency: soft?.pricing?.currency:'symbol-narrow' }}
        </button>
      </ng-container>
      <ng-template #openRef>
        <ng-container *ngIf="package$ | async as pkg; else installRef">
          <ng-container *ngIf="!pkg.upgradable; else upgradableRef">
            <button class="control" *ngIf="pkg.localVersion; else installRef" (click)="openApp($event)">
              <ng-container i18n>Open</ng-container>
            </button>
          </ng-container>
        </ng-container>
        <ng-template #upgradableRef>
          <button class="control" (click)="updateApp($event)">
            <ng-container i18n>Update</ng-container>
          </button>
        </ng-template>
        <ng-template #installRef>
          <button class="control" (click)="installApp($event)">
            <ng-container i18n>Install</ng-container>
          </button>
        </ng-template>
      </ng-template>
    </ng-container>

  </ng-container>
  <!-- NoAuthorizaed -->
  <ng-template #noAuthorizaedRef>
    <!-- If noAuthorizaed show install Else show unavailable -->
    <ng-container *ngIf="package$ | async as pkg; else noAuthInstallRef">
      <ng-container *ngIf="soft.free || (userAppIDs$ | async)?.includes(soft.id); else noFreeInstallRef">
        <ng-container *ngIf="pkg.localVersion; else noAuthInstallRef">
          <button class="control" (click)="openApp($event)">
            <ng-container i18n>Open</ng-container>
          </button>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-template>
  <ng-template #noFreeInstallRef>
    <button class="control price" (click)="sysAuthMessage()">
      {{ soft?.pricing?.price / 100 | currency: soft?.pricing?.currency:'symbol-narrow' }}
    </button>
  </ng-template>
  <ng-template #noAuthInstallRef>
    <button class="control" (click)="sysAuthMessage()">
      <ng-container i18n>Install</ng-container>
    </button>
  </ng-template>
</ng-template>
