<ion-header>
  <ion-toolbar>
    <ion-title>Installed Services</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content style="position: relative">

  <!-- loading -->
  <text-spinner *ngIf="loading" text="Connecting to Embassy"></text-spinner>

  <!-- not loading -->
  <div *ngIf="!loading">
    <div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
      <div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
        <h2>Welcome to <ion-text color="danger" style="font-family: 'Montserrat';">Embassy</ion-text></h2>
        <p class="ion-text-wrap">Get started by installing your first service.</p>
      </div>
      <ion-button color="dark" [routerLink]="['/marketplace']" routerDirection="root" style="width: 50%;">
        <ion-icon slot="start" name="storefront-outline"></ion-icon>
        Marketplace
      </ion-button>
    </div>

    <ng-template #list>
      <ion-grid>
        <ion-row>
          <ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="6" sizeSm="4" sizeLg="3">
            <ion-card class="installed-card" [routerLink]="['/services', pkg.value.entry.manifest.id]">
              <div
                class="bulb"
                [style.background-color]="connectionFailure ? 'var(--ion-color-dark)' : 'var(--ion-color-' + pkg.value.primaryRendering.color + ')'"
              >
            </div>
              <div class="launch-container" *ngIf="pkg.value.entry.manifest.interfaces | hasUi">
                <div class="launch-button-triangle"  (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry.state | isLaunchable : pkg.value.entry.installed?.status.main.status : pkg.value.entry.manifest.interfaces)">
                  <ion-icon name="open-outline"></ion-icon>
                </div>
              </div>
              <img class="main-img" [src]="pkg.value.entry['static-files'].icon" alt="icon" />
              <ion-card-header>
                <ion-card-title>
                  {{ pkg.value.entry.manifest.title }}
                </ion-card-title>
              </ion-card-header>
              <ion-card-content>
                <ion-toolbar class="status-toolbar">
                  <ion-title>
                    <ion-text *ngIf="!!pkg.value.installProgress" color="primary">{{ pkg.value.entry.state | titlecase }}...{{ pkg.value.installProgress.totalProgress }}%</ion-text>
                    <status
                      *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state"
                      [disconnected]="connectionFailure"
                      [rendering]="pkg.value.primaryRendering"
                      weight="bold"
                      size="calc(10px + .5vw)"
                    >
                    </status>
                  </ion-title>
                  <ion-icon *ngIf="pkg.value.error" name="warning-outline" color="warning"></ion-icon>
                </ion-toolbar>
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ng-template>
  </div>
</ion-content>
