calculator-list.component.html

<div class="container" fxLayout="row wrap" fxLayoutAlign="space-evenly stretch">

    <mat-card class="welcome-card" *ngIf="nbOpenCalculators === 0">

        <mat-card-header>
            <!-- <img mat-card-avatar src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/water-wave.png"> -->
            <mat-card-title>{{ uitextWelcomeTitle }}</mat-card-title>
            <mat-card-subtitle>{{ uitextWelcomeSubtitle }}</mat-card-subtitle>
        </mat-card-header>

        <mat-card-content [innerHTML]="uitextWelcomeContent">
        </mat-card-content>

        <img mat-card-image src="../../assets/images/logo_irstea_m.jpg">

        <img mat-card-image src="../../assets/images/logo_afb_m.jpg">

        <mat-card-actions>
            <div class="container" fxLayout="column" fxLayoutAlign="left" fxLayoutGap="10px">
                <button mat-raised-button color="accent" class="theme-calculator"></button>
            </div>
        </mat-card-actions>

    </mat-card>

    <mat-card *ngFor="let theme of items" class="compute-nodes-theme">

        <mat-card-header>
            <!-- <img mat-card-avatar src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/water-wave.png"> -->
            <mat-card-title>{{ theme.title }}</mat-card-title>
            <!-- <mat-card-subtitle>{{ theme.description }}</mat-card-subtitle> -->
        </mat-card-header>

        <div class="mat-card-image-overlay-container">
            <img mat-card-image [src]="theme.image.path">
            <div class="mat-card-image-overlay">
                <div class="theme-image-credits">
                    {{ theme.image.credits }}
                </div>
            </div>
        </div>

        <mat-card-content>
            <p>{{ theme.description }}</p>
        </mat-card-content>

        <mat-card-actions>
            <div class="container" fxLayout="column" fxLayoutAlign="left" fxLayoutGap="10px">
                <button mat-raised-button color="accent" *ngFor="let calc of theme.calculators" class="theme-calculator"
                    (click)="create(calc.type)" [innerHTML]="calc.label" [id]="calc.buttonId"></button>
            </div>
        </mat-card-actions>
    
    </mat-card>

</div>