<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'CLOTH.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <app-information [algorithmInformation]="algoInformation"/>
    <div class="flex flex-col mb-4">
      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
        <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>
        <button mat-raised-button color="accent" (click)="restartSimulation()">
          {{ 'CLOTH.RESTART_SIMULATION' | translate }}
        </button>
      </div>
      <div class="flex items-center gap-2.5">
        <span>{{ 'CLOTH.ELONGATION' | translate }}: {{ elongation }}</span>
        <mat-slider min="0.5" max="2.0" step="0.1">
          <input matSliderThumb [(ngModel)]="elongation">
        </mat-slider>
      </div>
    </div>
    <app-babylon-canvas
      [config]="renderConfig"
      (sceneReady)="onSceneReady($event)"
      (sceneResized)="onSceneReady($event)"
    />
  </mat-card-content>
</mat-card>
