<mat-card class="algo-container">
  <mat-card-header>
    <mat-card-title>{{ 'CLOTH.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <app-information [algorithmInformation]="algoInformation"/>
    <div class="controls-container">
      <div class="controls-panel">
        <button mat-raised-button color="primary" (click)="toggleWind()">
          {{ isWindActive ? ('CLOTH.WIND_OFF' | translate)  : ('CLOTH.WIND_ON' | translate) }}
        </button>
        <button mat-raised-button color="primary" (click)="toggleMesh()">
          {{ isOutlineActive ? ('CLOTH.OUTLINE_OFF' | translate)  : ('CLOTH.OUTLINE_ON' | translate) }}
        </button>
      </div>
    </div>
    <app-babylon-canvas
      [config]="renderConfig"
      (sceneReady)="onSceneReady($event)"
      (sceneResized)="onSceneReady($event)"
    />
  </mat-card-content>
</mat-card>
