<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <app-information [algorithmInformation]="algoInformation"/>
    <div class="flex flex-col mb-4">
      <div class="grid grid-cols-2 tablet:grid-cols-1 tablet:gap-4 mb-6">
          <div class="flex items-center gap-4 mr-4">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
          </div>
          <div class="flex items-center gap-4 mr-4">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
          </div>

          <div class="flex items-center gap-4 mr-4">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
          </div>
          <div class="flex items-center gap-4 mr-4">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
          </div>

          <div class="flex items-center gap-4 mr-4">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.M1_MASS' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
          </div>
          <div class="flex items-center gap-4 mr-4">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.M2_MASS' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
          </div>

          <div class="flex items-center gap-4 mr-4 col-span-full">
            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.DAMPING' | translate }}</p>
            <ngx-slider class="grow" [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
          </div>
      </div>

      <div class="flex flex-wrap gap-3 mb-4">
        <button mat-raised-button color="primary" (click)="pushPendulum(true)">
          {{ 'PENDULUM.POKE_M1' | translate }}
        </button>
        <button mat-raised-button color="primary" (click)="pushPendulum(false)">
          {{ 'PENDULUM.POKE_M2' | translate }}
        </button>
        <button mat-raised-button color="primary" (click)="resetPendulum()">
          {{ 'PENDULUM.RESET' | translate }}
        </button>
      </div>

      <div class="flex flex-wrap gap-4 items-center text-[0.9em] mt-2.5">
        <span><span class="legend-swatch bg-yellow-400"></span> L1</span>
        <span><span class="legend-swatch bg-fuchsia-500"></span> L2</span>
        <span><span class="legend-swatch bg-red-600"></span> M1</span>
        <span><span class="legend-swatch bg-green-600"></span> M2</span>
      </div>
    </div>
    <app-babylon-canvas
      [config]="renderConfig"
      (sceneReady)="onSceneReady($event)"
      (sceneResized)="onSceneReady($event)"
    />
  </mat-card-content>
</mat-card>
