<div class="watch-page">
  <header class="watch-head">
    <a class="back-link" routerLink="/tournaments">← Tournaments</a>
    <div class="watch-title">
      @if (snapshot?.white && snapshot?.black) {
        <span class="player">{{ snapshot!.white!.name }}</span>
        <span class="vs">vs</span>
        <span class="player">{{ snapshot!.black!.name }}</span>
        @if (snapshot?.round) {
          <span class="round-tag">Round {{ snapshot!.round }}</span>
        }
      } @else {
        <span class="player">Game {{ gameId }}</span>
      }
    </div>
  </header>

  @if (error) {
    <div class="watch-error">{{ error }}</div>
  } @else if (connecting) {
    <div class="watch-loading"><span class="pulse"></span>Connecting to stream…</div>
  }

  <div class="watch-layout">
    <div class="board-wrap">
      <div class="clock clock-top" [class.active]="status === 'ongoing' && turn === 'black'">
        <span class="clock-label">{{ snapshot?.black?.name ?? 'Black' }}</span>
        <span class="clock-time">{{ formatTime(clock?.blackTime) }}</span>
      </div>
      <app-chess-board [fen]="fen"></app-chess-board>
      <div class="clock clock-bot" [class.active]="status === 'ongoing' && turn === 'white'">
        <span class="clock-label">{{ snapshot?.white?.name ?? 'White' }}</span>
        <span class="clock-time">{{ formatTime(clock?.whiteTime) }}</span>
      </div>
    </div>

    <aside class="watch-side">
      <div class="status-card" [attr.data-status]="status">
        <div class="status-line">{{ statusLabel() }}</div>
        @if (clock?.increment) {
          <div class="status-sub">+{{ clock!.increment }}s increment</div>
        }
      </div>

      <div class="moves-card">
        <h3 class="moves-heading">Moves <span class="ply-count">{{ moves.length }}</span></h3>
        @if (moves.length === 0) {
          <p class="moves-empty">No moves yet.</p>
        } @else {
          <ol class="moves-list">
            @for (p of movePairs(); track p.n) {
              <li>
                <span class="move-no">{{ p.n }}.</span>
                <span class="move-uci">{{ p.white }}</span>
                <span class="move-uci">{{ p.black ?? '' }}</span>
              </li>
            }
          </ol>
        }
      </div>
    </aside>
  </div>
</div>
