NowChess-Frontend/src/app/pages/welcome/welcome.component.html

<main class="welcome-shell">
  <div class="theme-toggle-container">
    <div class="switch">
      <input type="checkbox" class="switch__input" id="themeToggle" (change)="toggleDarkMode()" [checked]="!isDarkMode()">
      <label class="switch__label" for="themeToggle">
        <span class="switch__indicator"></span>
        <span class="switch__decoration"></span>
      </label>
    </div>
  </div>
  <div class="clouds-container">
    <div class="cloud cloud-left">
      <img src="arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
    </div>
    <div class="plane plane-left">
      <img src="arabian-chess/plane.png" alt="Plane" class="plane-body" />
      <img src="arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
    </div>
    <div class="cloud cloud-right">
      <div class="gif-with-halo">
        <img src="arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
      </div>
    </div>
  </div>
  <section class="welcome-card">
    <h1>Welcome to NowChess</h1>
    <p>Pick a mode to begin.</p>

    <div class="mode-grid">
      <button type="button" class="mode mode-active" (click)="toggleDifficultySelector()" [disabled]="creating">
        <span>Bot</span>
        <small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
      </button>

      @if (showDifficultySelector) {
        <div class="difficulty-selector">
          <p>Select difficulty:</p>
          <div class="difficulty-buttons">
            <button type="button" class="difficulty-btn easy" (click)="startVsBot('easy')" [disabled]="creating">
              Easy
            </button>
            <button type="button" class="difficulty-btn medium" (click)="startVsBot('medium')" [disabled]="creating">
              Medium
            </button>
            <button type="button" class="difficulty-btn hard" (click)="startVsBot('hard')" [disabled]="creating">
              Hard
            </button>
          </div>
        </div>
      }

      <button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
        <span>1 vs 1</span>
        <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
      </button>

      <button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
        <span>Join Game</span>
        <small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
      </button>

      <button type="button" class="mode mode-active" (click)="toggleImportGameForm()" [disabled]="importing">
        <span>Import Game</span>
        <small>{{ importing ? 'Importing...' : 'FEN or PGN' }}</small>
      </button>
    </div>

    @if (showJoinGameForm) {
      <div class="join-game-form">
        <p>Enter the game ID:</p>
        <div class="join-game-input-group">
          <input
            type="text"
            class="join-game-input"
            [(ngModel)]="gameIdInput"
            placeholder="Paste game ID here"
            [disabled]="joiningGame"
            (keyup.enter)="joinGame()"
          />
          <button
            type="button"
            class="join-game-btn join"
            (click)="joinGame()"
            [disabled]="joiningGame || !gameIdInput.trim()"
          >
            {{ joiningGame ? 'Joining...' : 'Join' }}
          </button>
          <button
            type="button"
            class="join-game-btn cancel"
            (click)="clearJoinGameForm()"
            [disabled]="joiningGame"
          >
            Cancel
          </button>
        </div>
      </div>
    }

    @if (showImportGameForm) {
      <div class="import-game-form">
        <p>Import game</p>
        <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
          <label class="import-mode-option">
            <input
              type="radio"
              name="importMode"
              [checked]="importMode === 'fen'"
              (change)="setImportMode('fen')"
              [disabled]="importing"
            />
            <span>FEN</span>
          </label>
          <label class="import-mode-option">
            <input
              type="radio"
              name="importMode"
              [checked]="importMode === 'pgn'"
              (change)="setImportMode('pgn')"
              [disabled]="importing"
            />
            <span>PGN</span>
          </label>
        </div>
        <textarea
          class="import-game-text"
          [(ngModel)]="importText"
          [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
          [disabled]="importing"
          rows="5"
        ></textarea>
        <button
          type="button"
          class="join-game-btn join"
          (click)="submitImportedGame()"
          [disabled]="importing || !importText.trim()"
        >
          {{ importing ? 'Importing...' : 'Done' }}
        </button>
      </div>
    }

    @if (errorMessage) {
      <p class="error">{{ errorMessage }}</p>
    }
  </section>
</main>