<div class="player" [class.is-turn]="isActive">
  <div class="player-avatar" [class.avatar-black]="color === 'black'" [class.avatar-white]="color === 'white'">
    {{ initial }}
  </div>

  <div class="player-info">
    <div class="player-name">{{ name }}</div>
    @if (capturedPieces.length > 0) {
      <div class="captured">
        @for (pc of capturedPieces; track $index) {
          <span class="pc">{{ pc }}</span>
        }
      </div>
    }
  </div>

  @if (clockDisplay !== '--:--') {
    <div class="clock" [class.clock-active]="isActive" [class.clock-low]="isLowTime && !isActive">
      {{ clockDisplay }}
    </div>
  }
</div>
