<dialog #dialog>
  <dstore-close-button [dialog]="dialog"></dstore-close-button>
  <ng-container *ngIf="dialog.open">
    <div class="title" i18n>Please select the apps to install</div>
    <div class="container">
      <ng-template #$waiting>
        <app-wait></app-wait>
      </ng-template>
      <ng-container *ngIf="apps$ | async as apps;else $waiting">
        <dstore-scrollbar [flex]="true" (intersecting)="intersecting($event)">
          <div class="app-list">
            <div class="app" dstoreHover #dstoreHover="dstoreHover" *ngFor="let app of apps" (click)="touch(app)">
              <dstore-checkbox-button [class.hover]="dstoreHover.hover" [disabled]="unavailable(app)" [value]="batchInstall.has(app.soft?.name)"></dstore-checkbox-button>
              <img dstoreCover="icon" [src]="app.app?.info.locales[0]?.icon | coverImage" /> {{ app.app?.info.locales[0]?.name }}
            </div>
          </div>
        </dstore-scrollbar>
        <div class="app_wait" *ngIf="loading">
          <app-wait></app-wait>
        </div>
        <div class="paginator">
          <div class="select-control">
            <a (click)="selectPage(apps)" i18n>All</a>
            <a (click)="touchPage(apps)" i18n>Inverse</a>
            <span>{{ batchInstall.size }}/{{ length$ | async }}</span>
          </div>
        </div>
      </ng-container>
    </div>
    <div class="text-align">
      <ng-container *ngIf="sysAuthStatus$ | async; else $noAuthorizaedInstallRef">
        <button class="primary installAll" (click)="installAll()">
          <ng-container i18n>Start Installation</ng-container>
        </button>
      </ng-container>
      <ng-template #$noAuthorizaedInstallRef>
        <button class="primary installAll" (click)="sysAuthMessage()">
          <ng-container i18n>Start Installation</ng-container>
        </button>
      </ng-template>
    </div>
  </ng-container>
</dialog>