<mat-card class="algo-container">
  <mat-card-header>
    <mat-card-title>{{ 'FRACTAL3D.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <app-information [algorithmInformation]="algoInformation"/>
    <div class="controls-container">
      <div class="controls-panel">
        <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>
