<!-- header -->
<ion-item-divider>
  {{ reordering ? "Reorder" : "Installed Services" }}
  <ion-button *ngIf="pkgs.length > 1" slot="end" fill="clear" (click)="toggle()">
    <ion-icon
      slot="start"
      [name]="reordering ? 'checkmark' : 'swap-vertical'"
    ></ion-icon>
    {{ reordering ? "Done" : "Reorder" }}
  </ion-button>
</ion-item-divider>

<!-- reordering -->
<ion-list *ngIf="reordering; else grid">
  <ion-reorder-group disabled="false" (ionItemReorder)="reorder($any($event))">
    <ion-reorder *ngFor="let item of pkgs">
      <ion-item color="light" *ngIf="item | packageInfo | async as pkg" class="item">
        <app-list-icon
          slot="start"
          [pkg]="pkg"
          [connectionFailure]="connectionFailure$ | async"
        ></app-list-icon>
        <ion-thumbnail slot="start">
          <img alt="" [src]="pkg.entry['static-files'].icon" />
        </ion-thumbnail>
        <ion-label>
          <h2>{{ pkg.entry.manifest.title }}</h2>
          <p>{{ pkg.entry.manifest.version | displayEmver }}</p>
          <status
            [disconnected]="connectionFailure$ | async"
            [rendering]="pkg.primaryRendering"
            [installProgress]="pkg.installProgress?.totalProgress"
            weight="bold"
            size="small"
            [sigtermTimeout]="pkg.entry.manifest.main['sigterm-timeout']"
          ></status>
        </ion-label>
        <ion-icon slot="end" name="reorder-three" color="dark"></ion-icon>
      </ion-item>
    </ion-reorder>
  </ion-reorder-group>
</ion-list>

<!-- not reordering -->
<ng-template #grid>
  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let pkg of pkgs" sizeXs="12" sizeXl="6">
        <app-list-pkg
          [pkg]="pkg | packageInfo | async"
          [connectionFailure]="connectionFailure$ | async"
        ></app-list-pkg>
      </ion-col>
    </ion-row>
  </ion-grid>
</ng-template>
