<mat-card class="w-full max-w-[1920px] p-[clamp(10px,3vw,20px)]">
    <mat-card-header>
      <mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <app-information [algorithmInformation]="algoInformation"/>
      <div class="flex gap-[clamp(5px,2vw,10px)] mb-[clamp(10px,3vw,20px)] items-center flex-wrap mt-2.5 text-[0.9em]">
        <mat-form-field class="w-[clamp(150px,20vw,200px)]" appearance="fill">
          <mat-label>{{ 'SORTING.ALGORITHM' | translate }}</mat-label>
          <mat-select [(ngModel)]="selectedAlgorithm">
            @for (algo of algoInformation.entries; track algo.name) {
              <mat-option [value]="algo.name">{{ algo.name }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <mat-form-field class="w-[clamp(150px,20vw,200px)]" appearance="outline">
          <mat-label>{{ 'SORTING.ARRAY_SIZE' | translate }}</mat-label>
          <input
            matInput
            type="number"
            [min]="MIN_ARRAY_SIZE"
            [max]="MAX_ARRAY_SIZE"
            [(ngModel)]="arraySize"
            (blur)="newArraySizeSet()"
            (keyup.enter)="newArraySizeSet()"
          />
        </mat-form-field>
      </div>
      <div class="flex gap-[clamp(5px,2vw,10px)] mb-[clamp(10px,3vw,20px)] items-center flex-wrap">
        <button mat-raised-button color="primary" (click)="startSorting()">
          <mat-icon>play_arrow</mat-icon> {{ 'SORTING.START' | translate }}
        </button>
        <button mat-raised-button color="warn" (click)="resetSorting()">
          <mat-icon>refresh</mat-icon> {{ 'SORTING.RESET' | translate }}
        </button>
        <button mat-raised-button (click)="generateNewArray()">
          <mat-icon>add_box</mat-icon> {{ 'SORTING.GENERATE_NEW_ARRAY' | translate }}
        </button>
        <button mat-raised-button (click)="toggleSound()">
          <mat-icon>{{ isSoundEnabled ? 'volume_up' : 'volume_off' }}</mat-icon>
          {{ isSoundEnabled ? ('SORTING.SOUND_OFF' | translate) : ('SORTING.SOUND_ON' | translate) }}
        </button>
      </div>

      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
        <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
      </div>
      <div class="flex items-end h-[clamp(200px,40vh,400px)] border-b border-app-fg mb-[clamp(10px,3vw,20px)] gap-px bg-card-bg">
        @for (item of sortArray; track $index) {
          <div
            class="grow w-2.5 min-w-px transition-all duration-[50ms]"
            [style.height.px]="item.value * 3"
            [ngClass]="{
              'bg-[#424242]': item.state === 'unsorted',
              'bg-[#ffeb3b]': item.state === 'comparing',
              'bg-[#4caf50]': item.state === 'sorted'
            }"
          ></div>
        }
      </div>
    </mat-card-content>
  </mat-card>
