@if (!isEmpty()) {
  <div class="menu-container">
    @if (isList()) {
      <mat-list class="adf-app-list">
        @for (app of appList; track app) {
          <mat-list-item class="adf-app-list-item" (click)="selectApp(app)" (keyup.enter)="selectApp(app)" tabindex="0" role="button" title="{{app.name}}">
            <mat-icon matListItemIcon>touch_app</mat-icon>
            <span matLine>{{getAppName(app) | translate}}</span>
          </mat-list-item>
        }
      </mat-list>
    }
    @if (isGrid()) {
      <div class="adf-app-listgrid">
        @for (app of appList; track app) {
          <div
            class="adf-app-listgrid-item">
            <mat-card appearance="outlined" tabindex="0"
              role="button"
              class="adf-app-listgrid-item-card"
              title="{{getAppName(app) | translate}}"
              [ngClass]="[getTheme(app)]"
              (click)="selectApp(app)"
              (keyup.enter)="selectApp(app)">
              <div class="adf-app-listgrid-item-card-logo">
                <mat-icon class="adf-app-listgrid-item-card-logo-icon">{{getBackgroundIcon(app)}}</mat-icon>
              </div>
              <div mat-card-title class="adf-app-listgrid-item-card-title">
                <h1>{{getAppName(app) | translate}}</h1>
              </div>
              <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle">
                <div class="adf-line-clamp">{{app.description}}</div>
              </mat-card-subtitle>
              <mat-card-actions class="adf-app-listgrid-item-card-actions">
                @if (isSelected(app.id)) {
                  <mat-icon class="adf-app-listgrid-item-card-actions-icon">done</mat-icon>
                }
              </mat-card-actions>
            </mat-card>
          </div>
        }
      </div>
    }
  </div>
}

@if (isLoading()) {
  <div class="adf-app-list-spinner">
    <mat-progress-spinner mode="indeterminate" />
  </div>
} @else {
  @if (isEmpty()) {
    <div class="adf-app-list-empty">
      @if (hasEmptyCustomContentTemplate) {
        <ng-content select="adf-custom-empty-content-template"
          class="adf-custom-empty-template" />
      } @else {
        <adf-empty-content
          icon="apps"
          [title]="'ADF_TASK_LIST.APPS.TITLE' | translate"
          [subtitle]="'ADF_TASK_LIST.APPS.SUBTITLE' | translate" />
      }
    </div>
  }
}