<div class="menu-container" *ngIf="!isEmpty()">
    <ul class='mdl-list' *ngIf="isList()">
        <li class="mdl-list__item" (click)="selectApp(app)" *ngFor="let app of appList">
            <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">touch_app</i>
            {{app.name}}
            </span>
        </li>
    </ul>
    <div class="mdl-grid" *ngIf="isGrid()">
        <div (click)="selectApp(app)" [ngClass]="['mdl-card mdl-cell',  getTheme(app)]" *ngFor="let app of appList">
            <div class="logo"><i class="material-icons">{{getBackgroundIcon(app)}}</i></div>
            <div class="mdl-card__title">
                <h1 class="mdl-card__title-text">{{app.name}}</h1>
            </div>
            <div class="mdl-card__supporting-text">
                <p>{{app.description}}</p>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <i class="material-icons selectedIcon" *ngIf="isSelected(app.id)">done</i>
            </div>
        </div>
    </div>
</div>
