<!-- Template for app lists -->
<ng-template #appsList let-appCatList="appCatList">
  @for (app of appCatList.apps; track app) {
    <ion-col size="6" size-xs="6" size-sm="4" size-lg="3" size-xl="2">
      <ion-card>
        <ion-item lines="full" color="primary" style="cursor: pointer" (click)="onAppClicked(app)">
          <ion-label style="white-space: initial" class="ion-no-margin">
            <!-- Use short name if existing otherwise use normal name -->
            {{ app.shortName ?? app.name }}
            @if (edge.roleIsAtLeast("admin") && app.permissions) {
              <span>({{ app.permissions.canSee }})</span>
            }
          </ion-label>
        </ion-item>
        <ion-card-content>
          <div>
            <div style="display: flex; align-items: center; justify-content: center; cursor: pointer" (click)="onAppClicked(app)" (keydown.enter)="onAppClicked(app)" [ngStyle]="{ opacity: app.status.name === 'INSTALLABLE' || app.instanceIds.length > 0 ? '100%' : '20%' }">
              @if (app.image) {
                <img [src]="app.image" />
              } @else {
                @if (app.imageUrl) {
                  <img [src]="app.imageUrl" (error)="app.imageUrl = null" />
                } @else {
                  <div style="max-width: 100%">
                    <h1 style="text-align: center; white-space: initial">
                      {{ app.name }}
                    </h1>
                  </div>
                }
              }
            </div>

            @if (false) {
              <p>
                <small>{{ "EDGE.CONFIG.APP.TECHNICAL_NAME" | translate }}: {{ app.appId }}</small
                ><br />
                <small
                  >{{ "EDGE.CONFIG.APP.CATEGORY" | translate }}:
                  @for (c of app.categorys; track c) {
                    <a>
                      {{ c.readableName }}
                    </a>
                  }</small
                ><br />
                <small>{{ "EDGE.CONFIG.APP.CARDINALITY" | translate }}: {{ app.cardinality }}</small>
              </p>
            }
          </div>
        </ion-card-content>
        <ion-accordion-group>
          @if (app.instanceIds.length === 0 && app.status.name !== "INSTALLABLE") {
            <ion-accordion>
              <ion-item slot="header" color="light">
                <ion-label style="white-space: initial; text-align: center"> {{ "EDGE.CONFIG.APP.NOT_AVAILABLE" | translate }}</ion-label>
              </ion-item>
              <div class="ion-padding" slot="content" (ngDomChange)="onDomChange($event, app.appId)">
                <ion-label>
                  @for (message of app.status.errorCompatibleMessages; track message) {
                    <div>
                      <span [innerHTML]="message"></span>
                    </div>
                  }
                </ion-label>
                <ion-label>
                  @for (message of app.status.errorInstallableMessages; track message) {
                    <div>
                      <span [innerHTML]="message"></span>
                    </div>
                  }
                </ion-label>
              </div>
            </ion-accordion>
          }
        </ion-accordion-group>
      </ion-card>
    </ion-col>
  }
</ng-template>

<!-- Start of Page -->

<ion-content>
  <ngx-spinner [name]="spinnerId"></ngx-spinner>

  <ion-grid>
    <ion-row>
      <ion-searchbar mode="md" style="--background: var(--ion-color-searchbar-background); color: var(--ion-color-searchbar-text); flex: 1" (ionInput)="onValueChanged($event)" [debounce]="1000"> </ion-searchbar>
    </ion-row>

    <oe-filter [filters]="filters" (setSearchParams)="searchOnChange($event)"></oe-filter>
    <ion-row>
      <ion-col size="12" [attr.size-xl]="canEnterKey ? 6 : 12">
        @if (isUpdateAvailable) {
          <ion-card>
            <ion-item lines="full" color="light">
              <ion-icon slot="start" size="large" name="information-outline"></ion-icon>
              <ion-text text-nowrap>
                <a routerLink="/device/{{ edge.id }}/settings/system" text-nowrap translate>{{
                  "EDGE.CONFIG.APP.UPDATE_AVAILABLE"
                    | translate
                      : {
                          edgeShortName: environment.edgeShortName,
                        }
                }}</a>
              </ion-text>
            </ion-item>
          </ion-card>
        }
      </ion-col>
      @if (canEnterKey) {
        <ion-col size="12" size-md="6" size-xl="3">
          <ion-card id="redeemKeyCard" style="cursor: pointer" (click)="redeemKey()">
            <ion-item lines="full" color="primary" id="bottom-start">
              <ion-icon slot="start" name="bag-add-outline"></ion-icon>
              <ion-text translate>EDGE.CONFIG.APP.KEY.USE_KEY</ion-text>
              @if (numberOfUnusedRegisteredKeys !== 0) {
                <ion-badge slot="end" color="dark">{{ numberOfUnusedRegisteredKeys }}</ion-badge>
              }
            </ion-item>
          </ion-card>
          <ion-popover #hasKeyPopover [isOpen]="showPopover()" side="bottom" alignment="center">
            <ng-template>
              <ion-content class="ion-padding" text-nowrap translate>EDGE.CONFIG.APP.UNUSED_REGISTERED_KEY_AVAILABLE</ion-content>
            </ng-template>
          </ion-popover>
        </ion-col>
        <ion-col size="12" size-md="6" size-xl="3">
          <ion-card style="cursor: pointer" (click)="registerKey()">
            <ion-item lines="full" color="primary">
              <ion-icon slot="start" name="key-outline"></ion-icon>
              <ion-text translate>EDGE.CONFIG.APP.KEY.REGISTER_KEY</ion-text>
            </ion-item>
          </ion-card>
        </ion-col>
      }
    </ion-row>
    @if (key && key.bundles) {
      <ion-row>
        <ion-col>
          <ion-segment [(ngModel)]="selectedBundle">
            @for (bundle of key.bundles; track bundle; let i = $index) {
              <ion-segment-button [value]="i" (click)="updateSelection()">
                <ion-text text-nowrap>
                  {{ bundle.length }}
                </ion-text>
              </ion-segment-button>
            }
          </ion-segment>
        </ion-col>
      </ion-row>
    }

    <ion-row>
      <ion-col size="12">
        @for (appList of appLists; track appList) {
          <div>
            @if (!isEmpty(appList) && appList.shouldBeShown()) {
              <ion-row style="position: -webkit-sticky; position: sticky; top: 0px; z-index: 100">
                <ion-col size="12">
                  <ion-card>
                    <ion-item lines="full" color="primary">
                      <ion-label style="text-align: center"> {{ appList.name | translate }} </ion-label>
                    </ion-item>
                  </ion-card>
                </ion-col>
              </ion-row>
              @for (appCatList of appList.appCategories; track appCatList) {
                <ion-row>
                  <ion-col size="12" size-xl="2" style="padding-top: 18px">
                    <ion-card>
                      <ion-item lines="full" color="light">
                        <ion-label style="text-align: center; white-space: initial">{{ appCatList.category.readableName }}</ion-label>
                      </ion-item>
                    </ion-card>
                  </ion-col>
                  <ion-col>
                    <ion-grid>
                      <ion-row>
                        <template [ngTemplateOutlet]="appsList" [ngTemplateOutletContext]="{ appCatList: appCatList }"></template>
                      </ion-row>
                    </ion-grid>
                  </ion-col>
                </ion-row>
              }
            }
          </div>
        }
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
