<div *ngIf="data">
    <div class="slidetitle">
        <h1>{{ data.data.title }}</h1>
        <h2><span translate>Motion block</span> – {{ data.data.motions.length }} <span translate>motions</span></h2>
    </div>

    <div *ngIf="commonRecommendation" class="spacer-bottom-20">
        <mat-basic-chip class="large" [ngClass]="getStateCssColor(0, 0)">
            {{ commonRecommendation }}
        </mat-basic-chip>
    </div>

    <table>
        <tr *ngFor="let i of rowsArray">
            <td *ngFor="let j of columnsArray">
                <ng-container *ngIf="getMotion(i, j)">
                    <div class="ellipsis-overflow spacer-top-5">
                        {{ getMotionTitle(i, j) }}
                        <br *ngIf="!shortDisplayStyle"/>
                        <span class="white" *ngIf="!commonRecommendation && getMotion(i, j).recommendationLabel">
                            <mat-basic-chip disableRipple [ngClass]="getStateCssColor(i, j)" class="block-recommendation">
                                {{ getMotion(i, j).recommendationLabel }}
                            </mat-basic-chip>
                        </span>
                    </div>
                </ng-container>
            </td>
        </tr>
    </table>
</div>
