<header>
  <div class="tabs">
    <div class="tab" routerLink="../local" routerLinkActive="active">
      <ng-container i18n>Local Apps</ng-container>
    </div>
    <div class="tab" routerLink="../remote" routerLinkActive="active">
      <ng-container i18n>Remote Apps</ng-container>
    </div>
  </div>
  <dstore-remote-install (freeChange)="freeChange($event)"></dstore-remote-install>
</header>

<m-refund *ngIf="refund" [remoteApp]="refund" (confirm)="refunding($event)" (cancel)="refund = null"> </m-refund>
<div class="table_head">
  <div class="th" i18n>Name</div>
  <div class="th" i18n>Rating</div>
  <div class="th" i18n>Version</div>
  <div class="th" i18n>Date Installed</div>
  <div class="th" i18n>Action</div>
</div>
<div class="remote-app-wrap">
  <dstore-scrollbar (intersecting)="intersecting($event)">
    <div class="remote-apps" *ngIf="installing$ | async as installing; else loadingRef">
      <ng-container *ngIf="apps$ | async as apps; else loadingRef">
        <div class="remote-app" *ngFor="let remoteApp of apps">
          <div class="content">
            <div class="title_wrap">
              <img class="icon" dstoreCover="icon" [src]="remoteApp.app.info?.locales[0]?.icon | coverImage"
                [routerLink]="['/app', remoteApp.app.id]" />
              <div class="right">
                <div dstoreTips class="info">{{ remoteApp.app.info?.locales[0]?.name }}</div>
              </div>
            </div>
            <ng-container *ngIf="
          remoteApp.soft?.package?.remoteVersion && remoteApp.app.active && !remoteApp.unavailable;
          else unavailableRef">
              <div class="score">
                <ng-container *ngIf="remoteApp.app?.comment?.count>=20; else $noneScore">
                  <dstore-star [rate]="remoteApp.app.comment.score/remoteApp.app.comment.count | appScore">
                  </dstore-star>
                  <span>{{remoteApp.app.comment.score/remoteApp.app.comment.count | appScore}}</span>
                </ng-container>
                <ng-template #$noneScore>
                  <span class="score_none" i18n>No ratings</span>
                </ng-template>
              </div>
              <div class="version">
                <ng-container
                  *ngIf="remoteApp.soft?.package?.remoteVersion && remoteApp.app.active && !remoteApp.unavailable;">
                  {{ remoteApp.app_version }}
                </ng-container>
              </div>

              <div class="time">
                {{ remoteApp.updated_at || remoteApp.created_at | date: 'yyyy.MM.dd' }}
              </div>

              <div class="control">
                <ng-container *ngIf="installing.includes(remoteApp.soft.package_name); else update">
                  <button i18n disabled>Installing</button>
                </ng-container>
                <ng-template #update>
                  <ng-container *ngIf="!installed.has(remoteApp.soft.package_name);else installedRef">
                    <ng-container *ngIf="remoteApp.soft.package.upgradable;else installedRef">
                      <ng-container *ngIf="sysAuthStatus$ | async;else $noAuthorizaedUpdateRef">
                        <button (click)="updateApp(remoteApp.soft)" i18n>Update</button>
                      </ng-container>
                      <ng-template #$noAuthorizaedUpdateRef>
                        <button (click)="sysAuthMessage()" i18n>Update</button>
                      </ng-template>
                    </ng-container>
                  </ng-container>
                </ng-template>
                <ng-template #installedRef>
                  <button disabled
                    *ngIf="remoteApp.soft.package.localVersion != '' || installed.has(remoteApp.soft.package_name); else install">
                    <ng-container i18n>Installed</ng-container>
                  </button>
                </ng-template>
                <ng-template #install>
                  <ng-container *ngIf="sysAuthStatus$ | async;else $noAuthorizaedRef">
                    <button class="primary" (click)="installApp(remoteApp.soft)" i18n>Install</button>
                  </ng-container>
                  <ng-template #$noAuthorizaedRef>
                    <button class="primary" (click)="sysAuthMessage()" i18n>Install</button>
                  </ng-template>
                </ng-template>

                <ng-container *ngIf="remoteApp.order_number">
                  <!-- todo -->
                  <ng-container *ngIf="remoteApp.can_refund; else canNotRefundRef">
                    <!-- todo -->
                    <ng-container *ngIf="refundeds.includes(remoteApp.app_id); else canRefundRef">
                      <div class="refund-waiting" i18n>Refunding</div>
                    </ng-container>
                    <ng-template #canRefundRef>
                      <button class="secondary default" (click)="refund = remoteApp" i18n>Refund</button>
                    </ng-template>
                  </ng-container>

                  <ng-template #canNotRefundRef>
                    <ng-container [ngSwitch]="remoteApp.refund_status">
                      <ng-container
                        *ngSwitchCase="RefundStatus.RefundStatusReviewing||RefundStatus.RefundStatusWaiting">
                        <div class="refund-waiting" i18n>Refunding</div>
                      </ng-container>

                      <ng-container *ngSwitchDefault>
                        <button class="secondary toolTip" disabled>
                          <ng-container i18n-title title="Two-hour refund period has expired" i18n>Refund</ng-container>
                          <div i18n class="toolTip_content">Two-hour refund period has expired</div>
                        </button>
                      </ng-container>
                    </ng-container>
                  </ng-template>
                </ng-container>
              </div>
            </ng-container>
            <ng-template #unavailableRef>
              <div class="no-version" i18n>The application is not available, please retry or give feedback</div>
              <div class="control"></div>
            </ng-template>
          </div>
        </div>
      </ng-container>
    </div>
  </dstore-scrollbar>
</div>

<div class="app_wait" *ngIf="loading$ | async">
  <app-wait></app-wait>
</div>

<ng-template #loadingRef>
  <div class="loadingContainer">
    <app-wait></app-wait>
  </div>
</ng-template>