  <mat-card class="w-full max-w-[1920px] p-5">
    <mat-card-header>
      <mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <app-information [algorithmInformation]="algoInformation"/>

      <div class="flex flex-col mb-4">
        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
          <button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
          <button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
        </div>
        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
          <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'normal'})">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
          <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'random'})">{{ 'PATHFINDING.RANDOM_CASE' | translate }}</button>
          <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'edge'})">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
          <button matButton="filled" (click)="createCase({withWalls: false, scenario: 'normal'})">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
        </div>

        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
          <mat-button-toggle-group class="rounded overflow-hidden" [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
            <mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
            <mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
            <mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle>
            <mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle>
          </mat-button-toggle-group>
        </div>
        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
          <div class="flex gap-3 items-center flex-wrap">
            <mat-form-field appearance="outline" class="w-[150px]">
              <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
                        <input
                          matInput
                          type="number"
                          [min]="MIN_GRID_SIZE"
                          [max]="MAX_GRID_SIZE"
                          [(ngModel)]="gridRows"
                          (ngModelChange)="genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
                        />          </mat-form-field>

            <mat-form-field appearance="outline" class="w-[150px]">
              <mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
                        <input
                          matInput
                          type="number"
                          [min]="MIN_GRID_SIZE"
                          [max]="MAX_GRID_SIZE"
                          [(ngModel)]="gridCols"
                          (ngModelChange)="genericGridComponent.gridCols = gridCols; genericGridComponent.applyGridSize()"
                        />          </mat-form-field>
          </div>
        </div>

        <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
          <span><span class="legend-swatch bg-green-600"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
          <span><span class="legend-swatch bg-red-600"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
          <span><span class="legend-swatch bg-black"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
          <span><span class="legend-swatch bg-sky-300"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
          <span><span class="legend-swatch bg-[gold]"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
        </div>
        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
          <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]="createPathfindingNode"
        [getNodeColorFn]="getPathfindingNodeColor"
        [applySelectionFn]="applyPathfindingSelection"
        [backgroundColor]="'lightgray'"
        (gridChange)="grid = $event"
      ></app-generic-grid>
    </mat-card-content>
  </mat-card>
