<mat-card class="algo-container">
  <mat-card-header>
    <mat-card-title>{{ 'LABYRINTH.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <app-information [algorithmInformation]="algoInformation"/>
    <div class="controls-container">
      <div class="controls-panel">
        <button matButton="filled" [disabled]="isAnimationRunning()" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
        <button matButton="filled" [disabled]="isAnimationRunning()" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
      </div>
      <div class="controls-panel">
        <button matButton="filled" [disabled]="isAnimationRunning()" (click)="createRandom(true)">{{ 'LABYRINTH.PRIM' | translate }}</button>
        <button matButton="filled" [disabled]="isAnimationRunning()" (click)="createRandom(false)">{{ 'LABYRINTH.KRUSKAL' | translate }}</button>
      </div>

      <div class="legend">
        <span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
        <span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
        <span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
        <span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
        <span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
      </div>
      <div class="controls-panel">
        <p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
        <p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
      </div>
    </div>
    <app-generic-grid
      [gridRows]="gridRows"
      [gridCols]="gridCols"
      [minGridSize]="MIN_GRID_SIZE"
      [maxGridSize]="MAX_GRID_SIZE"
      [maxGridPx]="MAX_GRID_PX"
      [createNodeFn]="createMazeNode"
      [getNodeColorFn]="getMazeColor"
      [applySelectionFn]="applyNoSelection"
      [backgroundColor]="'lightgray'"
      (gridChange)="grid = $event"
    ></app-generic-grid>
  </mat-card-content>
</mat-card>
