<mat-card class="algo-container">
  <mat-card-header>
    <mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <app-information [algorithmInformation]="algoInformation"/>
    <div class="controls-container">
      <div class="sliders-grid">
          <div class="slider-item">
            <p>{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
            <ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
          </div>
          <div class="slider-item">
            <p>{{ 'PENDULUM.ATTRACTION' | translate }}</p>
            <ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
          </div>

          <div class="slider-item">
            <p>{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
            <ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
          </div>
          <div class="slider-item">
            <p>{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
            <ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
          </div>

          <div class="slider-item">
            <p>{{ 'PENDULUM.M1_MASS' | translate }}</p>
            <ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
          </div>
          <div class="slider-item">
            <p>{{ 'PENDULUM.M2_MASS' | translate }}</p>
            <ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
          </div>

          <div class="slider-item full-width">
            <p>{{ 'PENDULUM.DAMPING' | translate }}</p>
            <ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
          </div>
      </div>

      <div class="actions-container">
        <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="legend" style="margin-top: 10px">
        <span><span class="legend-color L1"></span> L1</span>
        <span><span class="legend-color L2"></span> L2</span>
        <span><span class="legend-color M1"></span> M1</span>
        <span><span class="legend-color M2"></span> M2</span>
      </div>
    </div>
    <app-babylon-canvas
      [config]="renderConfig"
      (sceneReady)="onSceneReady($event)"
      (sceneResized)="onSceneReady($event)"
    />
  </mat-card-content>
</mat-card>
