<header>
  <div class="tabs">
    <div class="tab" routerLink="../local" routerLinkActive="active">
      <ng-container i18n>Local Apps</ng-container>
    </div>
    <ng-container *ngIf="logged | async;">
      <div class="tab" routerLink="../remote" routerLinkActive="active">
        <ng-container i18n>Remote Apps</ng-container>
      </div>
    </ng-container>
    <!-- <ng-template #$link>
      <div class="tab" (click)="login()">
        <ng-container i18n>Remote Apps</ng-container>
      </div>
    </ng-template> -->
  </div>
  <screen-box> </screen-box>
</header>

<ng-template #loadingContainer>
  <div class="loadingContainer">
    <app-wait></app-wait>
  </div>
</ng-template>
<div class="table_head">
  <div class="th" i18n>Name</div>
  <div class="th" i18n>Rating</div>
  <div class="th" i18n>Size</div>
  <div class="th" i18n>Version</div>
  <div class="th" i18n>Date Installed</div>
  <div class="th" i18n>Action</div>
</div>
<div class="installed-list">
  <dstore-scrollbar [full]="true" (intersecting)="intersecting($event)" >
    <ng-container *ngIf="result$ | async as installedList; else loadingContainer">
      <ng-container *ngIf="removingList$ | async as removingList">
        <!-- {{installedList | json}} -->
        <ng-container *ngFor="let installed of installedList">
          <div class="installed-app">
            <ng-container *ngIf="installed.software as software; else noSoftwareRef">
              <ng-container *ngIf="(software.id===0?software.package:software.info) as softwares">
                <div class="installed-info" >
                  <img class="icon" dstoreCover="icon" [routerLink]="['/app', installed.software.id]" [src]="softwares.icon" />
                  <div class="info">
                    <span dstoreTips>{{ softwares.name?softwares.name: installed.package.appName}}</span>
                  </div>
                </div>
              </ng-container>
            </ng-container>
            <ng-template #noSoftwareRef>
              <div class="installed-info" >
                <img class="icon" dstoreCover="icon" [routerLink]="['/app', 0]" [src]='installed.package.icon' />
                <div class="info">
                  <span dstoreTips>{{ installed.localName }}</span>
                </div>
              </div>
            </ng-template>
              <ng-template #confirm>
                <div class="confirm">
                  <ng-container i18n>Are you sure you want to uninstall this application?</ng-container>
                </div>
              </ng-template>
              <ng-template #removed>
                <div class="removed">

                </div>
              </ng-template>
              <ng-container *ngIf="removing.includes(installed.package.appName)||removing.includes(installed.software?.package_name)||removingList.includes(installed.software?.package_name);else $infos">
                <div class="removing">
                  <img />
                  <ng-container i18n>Uninstalling...</ng-container>
                </div>
              </ng-container>
              <ng-template #$infos>
                <ng-container *ngIf="selected != installed.name; else confirm">
                  <div class="score">
                    <ng-container *ngIf="installed.software?.stat&&installed.software?.stat.score_count>=20; else $noneScore">
                      <dstore-star [rate]="installed.software?.stat.score/2||0"></dstore-star>
                      <span>{{installed.software?.stat.score | appScore}}</span>
                    </ng-container>
                    <ng-template #$noneScore>
                      <span class="score_none" i18n>No ratings</span>
                    </ng-template>
                  </div>
                  <div class="size">
                    <span>{{ installed.package.size | sizeHuman }}</span>
                  </div>
                  <div class="version">
                    <span dstoreTips>{{ installed.package.localVersion }}</span>
                  </div>
                  <div class="time">
                    <span>{{ installed.package.installedTime * 1000 | date: 'yyyy-MM-dd' }}</span>
                  </div>
                </ng-container>
              </ng-template>
            <div class="control">
              <ng-template #confirmBtn>
                <button class="default" (click)="selected = null" i18n>Cancel</button>
                <button class="primary" (click)="remove(installed.software || installed)">
                  <ng-container i18n>Confirm</ng-container>
                </button>
              </ng-template>
              <ng-container *ngIf="selected !== installed.name; else confirmBtn">
                <ng-template #uninstall>
                  <button class="default" (click)="selected = installed.name" [disabled]="DisabledList.includes(installed.name)">
                    <ng-container i18n>Uninstall</ng-container>
                  </button>
                </ng-template>
                <ng-container *ngIf="removing.includes(installed.package.appName)||removing.includes(installed.software?.package_name)||removingList.includes(installed.software?.package_name) ; else uninstall">
                  <!-- <button class="default"  disabled>
                    <ng-container i18n>Uninstalling</ng-container>
                  </button> -->
                </ng-container>
              </ng-container>
            </div>
          </div>
        </ng-container>
      </ng-container>
    </ng-container>
  </dstore-scrollbar>
</div>
<div class="app_wait" *ngIf="loading">
  <app-wait></app-wait>
</div>