<div *ngIf="app$ | async as app; else $loading">
  <div class="appInfo">
    <section class="base_info">
      <div class="info_left">
        <img class="icon" dstoreCover="icon" [src]="app.info.icon" />
        <div class="info_content">
          <div class="info_content_title">
            <span dstoreTips class="info_content_title_context">{{app.info.name}}</span>
            <ng-container *ngIf="!app.skip">
              <img class="safe_icon" />
            </ng-container>
          </div>
          <div dstoreTips class="info_content_subtitle">
            {{app.info.slogan}}
          </div>
          <div class="info_content_rate">
            <ng-container *ngIf="app.stat as stat">
              <span *ngIf="stat.score_count < 20" i18n></span>
              <dstore-star *ngIf="stat.score_count >= 20" [rate]="stat.score / 2 || 0"></dstore-star>
              <span *ngIf="stat.score_count >= 20" class="details score">&nbsp;&nbsp;{{ (stat.score / 2 || 0).toFixed(1) }}</span>
              <ng-container *ngFor="let downloads of [stat.download + (installCount$ | async)]">
                <span class="details" i18n>{{ downloads }} downloads</span>
              </ng-container>
              <ng-container *ngFor="let score_count of [stat.score_count + (sourceCount$ | async)]">
                <span class="details" i18n>{{ score_count }} ratings</span>
              </ng-container>
            </ng-container>
          </div>
        </div>
      </div>
      <div class="info_right">
        <div class="bottons">
          <dstore-control class="control" [soft]="app" #controlRef [hidden]="controlRef.job$ | async"></dstore-control>
          <ng-container *ngIf="controlRef.job$ | async as job">
            <dstore-progress-button [job]="job.job" [type]="job.type" [status]="job.status" [progress]="job.progress" [disabled]="!job.cancelable || job.status === StoreJobStatus.failed"></dstore-progress-button>
          </ng-container>
          <div *ngIf="!app.free" class="refund">
            <div jqueryToolTip title="1. Users can request a refund within two hours after payment.&#10;2. Your first three refund requests are processed automatically, and the refunds are returned to the original account in real time.&#10;3. The fourth and later refund requests must be reviewed manually (2-3 working days). Your refund will be issued if approved, and you will receive an explanation if rejected."
              i18n-title>
              <i>i</i><span i18n>Refund Policy</span>
            </div>
          </div>
        </div>
      </div>
      <div class="both"></div>
    </section>
    <table class="app_info_table">
      <tr>
        <td>
          <label class="info_item" i18n>Category:</label>
          <m-category-name [category]="app.info.category"></m-category-name>
        </td>
        <td>
          <label class="info_item" i18n>Version:</label>
          <ng-container *ngIf="controlRef.package$ | async as package;else remoteRef">
            <label>{{ package.remoteVersion || package.localVersion }}</label>
            <label *ngIf="app.info.changelog" (click)="preDetailRef.toggle($event,true,{x:-13,y:.5})" class="log_btn" i18n>Changelog</label>
          </ng-container>
          <ng-template #remoteRef>
            <label>{{ app.info.packages[0].remoteVersion }}</label>
            <label *ngIf="app.info.changelog" (click)="preDetailRef.toggle($event,true,{x:-13,y:.5})" class="log_btn" i18n>Changelog</label>
          </ng-template>
        </td>
        <td>
          <label class="info_item" i18n>Size:</label>
          <label>
            <ng-template #$Downloaded>
              <ng-container i18n>Downloaded</ng-container>
            </ng-template>
            <ng-container *ngIf="controlRef.package$ | async as package;else CalculatingRef">
              <ng-container>{{ package.size | sizeHuman }}</ng-container>
            </ng-container>
            <ng-template #CalculatingRef>
              <ng-container>{{ app.info.packages[0].size | sizeHuman}}</ng-container>
            </ng-template>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label class="info_item" i18n>Updated Date:</label>
          <label>
            {{ app.updated_at | date: 'yyyy-MM-dd HH:mm' }}
          </label>
        </td>
        <td dstoreTips>
          <label class="info_item" i18n>Website:</label>
          <ng-container *ngIf="app.info.homePage; else $unknown">
            <label title="Open" i18n-title class="webSite" (click)="openURL(app.info.homePage)">
              {{ app.info.homePage }}
            </label>
          </ng-container>
        </td>
        <td>
          <label class="info_item" i18n>Developer:</label>
          <ng-container *ngIf="app.info.author; else $unknown">
            <a [routerLink]="['/list', 'author', app.info.author]">
              {{ (app.info.author | deepinid | async)?.nickname }}
            </a>
          </ng-container>
        </td>
      </tr>
      <tr>
        <td class="pre_td" colspan="3">
          <div class="description_content">
            <label class="info_item info_item_description" i18n>Description:</label>
            <label class="info_description">
              {{ app.info.description }}
            </label>
            <span *ngIf="description_overflow()" (click)="$layer.show()" class="info_description_more" i18n>More</span>
          </div>
        </td>
      </tr>
    </table>
    <ng-template #$unknown>
      <label i18n>Unknown</label>
    </ng-template>
  </div>
  <!-- 查看基本简介的弹窗 -->
  <dstore-layer #$layer>
    <ng-container class="layer_scroll_content">
      <h1 i18n>Description</h1>
      <p>{{app.info.description}}</p>
    </ng-container>
  </dstore-layer>

  <app-screenshot [screenshotList]="app.info.screenshot"></app-screenshot>

  <!-- <ng-container *ngIf="supportSignIn && controlRef.package$ | async as package">
    <app-donate [appName]="app.name"></app-donate>
  </ng-container> -->
  <ng-container>
    <dstore-app-comment [pkg]="controlRef.package$ | async" [appID]="app.id" [appVersion]="app.package.remoteVersion||app.package.localVersion"></dstore-app-comment>
    <div class="ad" *ngIf="adVisible$ | async">
      <ng-container i18n>CDN supported by UPYUN</ng-container>
    </div>
  </ng-container>
  <dstore-pre-detail [detail]="app.info.changelog" #preDetailRef></dstore-pre-detail>
</div>

<ng-template #$loading let-$app>
  <div class="loadingContainer" *ngIf="$app === null; else $DropOff">
    <app-wait></app-wait>
  </div>

  <ng-template #$DropOff>
    <div class="dropOff">
      <img class="tips_bg" />
      <span i18n>Sorry</span>
      <span i18n>It's in adjustment, you can return to</span>
      <a href="javascript:history.go(-1)" i18n>Previous</a>
    </div>
  </ng-template>

  <ng-template>
    <div>
      <span i18n>Sorry</span>
      <span i18n>Connection failed, please check your network and refresh</span>
    </div>
  </ng-template>

  <ng-template>
    <div><span i18n>Sorry</span> <span i18n>Something goes wrong.</span></div>
  </ng-template>
</ng-template>