<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'FOUR_COLOR.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-flat-button color="primary" (click)="generateNewMap()">{{ 'FOUR_COLOR.GENERATE' | translate }}</button>
        <button mat-flat-button color="accent" (click)="autoSolve()">{{ 'FOUR_COLOR.SOLVE' | translate }}</button>
        <button mat-stroked-button (click)="resetColors()">{{ 'FOUR_COLOR.CLEAR' | translate }}</button>
      </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)="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)="applyGridSize()"
            />
          </mat-form-field>
        </div>
      </div>

      <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
        <span><span class="legend-swatch bg-[#FF5252]"></span> {{ 'FOUR_COLOR.COLOR_1' | translate }}</span>
        <span><span class="legend-swatch bg-[#448AFF]"></span> {{ 'FOUR_COLOR.COLOR_2' | translate }}</span>
        <span><span class="legend-swatch bg-[#4CAF50]"></span> {{ 'FOUR_COLOR.COLOR_3' | translate }}</span>
        <span><span class="legend-swatch bg-[#FFEB3B]"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
      </div>

      <div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded border-l-[5px] font-medium min-w-[300px] items-center"
           [ngClass]="{
             'border-l-gray-500 bg-app-bg': solutionStatus === 'INCOMPLETE',
             'border-l-green-500 bg-green-50 text-green-800': solutionStatus === 'SOLVED',
             'border-l-orange-500 bg-orange-50 text-orange-700': solutionStatus === 'CONFLICTS',
             'border-l-red-500 bg-red-50 text-red-800': solutionStatus === 'INVALID'
           }">
        <span class="uppercase text-[0.8em] opacity-70">{{ 'FOUR_COLOR.STATUS.LABEL' | translate }}:</span>
        <span>{{ 'FOUR_COLOR.STATUS.' + solutionStatus | translate }}</span>
      </div>
    </div>

    <div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
      <canvas #fourColorCanvas
              class="cursor-pointer max-w-full h-auto [image-rendering:pixelated]"
              (mousedown)="onMouseDown($event)"
              (mousemove)="onMouseMove($event)"
              (touchstart)="onTouchStart($event)"
              (touchmove)="onTouchMove($event)"
      ></canvas>
    </div>
  </mat-card-content>
</mat-card>
