<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'FRACTAL3D.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 matButton="filled" (click)="onFractalTypeChange(0)">{{ 'FRACTAL3D.MANDELBULB' | translate }}</button>
        <button matButton="filled" (click)="onFractalTypeChange(1)">{{ 'FRACTAL3D.MANDELBOX' | translate }}</button>
        <button matButton="filled" (click)="onFractalTypeChange(2)">{{ 'FRACTAL3D.JULIA' | translate }}</button>
      </div>
    </div>
    <app-babylon-canvas
      [config]="fractalConfig"
      [renderCallback]="onRender"
    />
  </mat-card-content>
</mat-card>
