<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'FRACTAL.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]">
        <mat-form-field class="w-[200px]" appearance="fill">
          <mat-label>{{ 'FRACTAL.ALGORITHM' | translate }}</mat-label>
          <mat-select [value]="'Mandelbrot'" (selectionChange)="onAlgorithmChange($event.value)">
            <mat-option value="Mandelbrot">Mandelbrot</mat-option>
            <mat-option value="Julia">Julia</mat-option>
            <mat-option value="Burning Ship">Burning Ship</mat-option>
            <mat-option value="Newton">Newton</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="w-[200px]" appearance="fill">
          <mat-label>{{ 'FRACTAL.COLOR_SCHEME' | translate }}</mat-label>
          <mat-select [value]="'Blue-Gold'" (selectionChange)="onColorChanged($event.value)">
            <mat-option value="Blue-Gold">Blue-Gold</mat-option>
            <mat-option value="Greyscale">Greyscale</mat-option>
            <mat-option value="Fire">Fire</mat-option>
            <mat-option value="Rainbow">Rainbow</mat-option>
          </mat-select>
        </mat-form-field>

        <button mat-raised-button color="primary" (click)="onReset()">
          <mat-icon>undo</mat-icon> {{ 'FRACTAL.RESET' | translate }}
        </button>
      </div>
      <div style="display: flex; align-items: center; gap: 10px;">
        <mat-icon>zoom_out</mat-icon>
        <ngx-slider [(value)]="sliderValue" [options]="options" (valueChange)="onSliderChange($event)" ></ngx-slider>
        <mat-icon>zoom_in</mat-icon>
      </div>
    </div>

    <app-babylon-canvas
      [config]="renderConfig"
      [renderCallback]="onRender"
      (sceneReady)="onSceneReady($event)"
    />
  </mat-card-content>
</mat-card>
