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

      <div class="controls-panel">
        <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
      </div>
      <div class="visualization-area">
        @for (item of sortArray; track $index) {
          <div
            class="bar"
            [style.height.px]="item.value * 3"
            [class.unsorted]="item.state === 'unsorted'"
            [class.comparing]="item.state === 'comparing'"
            [class.sorted]="item.state === 'sorted'"
          ></div>
        }
      </div>
    </mat-card-content>
  </mat-card>
