<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'GOL.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 mat-raised-button (click)="generate(Scenario.SIMPLE)">
          <mat-icon>arrow_right</mat-icon> {{ 'GOL.SIMPLE_SCENE' | translate }}
        </button>
        <button mat-raised-button (click)="generate(Scenario.PULSAR)">
          <mat-icon>arrow_right</mat-icon> {{ 'GOL.PULSAR_SCENE' | translate }}
        </button>
        <button mat-raised-button (click)="generate(Scenario.GUN)">
          <mat-icon>arrow_right</mat-icon> {{ 'GOL.GUN_SCENE' | translate }}
        </button>
        <button mat-raised-button (click)="generate(Scenario.RANDOM)">
          <mat-icon>shuffle</mat-icon> {{ 'GOL.RANDOM_SCENE' | translate }}
        </button>
        <button mat-raised-button (click)="generate(Scenario.EMPTY)">
          <mat-icon>check_box_outline_blank</mat-icon> {{ 'GOL.EMPTY_SCENE' | translate }}
        </button>
      </div>
      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
        @if (gameStarted())
        {
          <button mat-raised-button (click)="pauseGame()">
            <mat-icon>pause</mat-icon> {{ 'GOL.PAUSE' | translate }}
          </button>
        } @else {
          <button mat-raised-button (click)="startGame()">
            <mat-icon>play_arrow</mat-icon> {{ 'GOL.START' | translate }}
          </button>
        }
        <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
      </div>
      <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"
            [(ngModel)]="gridRows"
            [min]="MIN_GRID_SIZE"
            [max]="MAX_GRID_SIZE"
            (ngModelChange)="pauseGame(); 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"
            [(ngModel)]="gridCols"
            [min]="MIN_GRID_SIZE"
            [max]="MAX_GRID_SIZE"
            (ngModelChange)="pauseGame(); genericGridComponent.gridCols = gridCols; genericGridComponent.applyGridSize()"
          />
        </mat-form-field>
          <mat-form-field appearance="outline" class="w-[150px]">
            <mat-label>{{ 'GOL.SPEED' | translate }}</mat-label>
            <input
              matInput
              type="number"
              [(ngModel)]="lifeSpeed"
              [min]="MIN_TIME_PER_GENERATION"
              [max]="MAX_TIME_PER_GENERATION"
              (blur)="applySpeed()"
              (keyup.enter)="applySpeed()"
            />
        </mat-form-field>

      </div>
      <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
        <span><span class="legend-swatch bg-black"></span> {{ 'GOL.ALIVE' | translate }}</span>
        <span><span class="legend-swatch bg-gray-300"></span> {{ 'GOL.DEAD' | translate }}</span>
      </div>
    </div>
    <app-generic-grid
      [gridRows]="gridRows"
      [gridCols]="gridCols"
      [minGridSize]="MIN_GRID_SIZE"
      [maxGridSize]="MAX_GRID_SIZE"
      [maxGridPx]="MAX_GRID_PX"
      [createNodeFn]="createConwayNode"
      [getNodeColorFn]="getConwayNodeColor"
      [applySelectionFn]="applyConwaySelection"
      [backgroundColor]="'lightgray'"
      (gridChange)="readGrid = $event"
    ></app-generic-grid>
  </mat-card-content>
</mat-card>
