<div class="modal-header flex-column" xmlns="http://www.w3.org/1999/html">
  <div class="d-flex justify-content-between align-items-center w-100">
    <h4 class="modal-title">Select Number of Survived Waves</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
  </div>
</div>

<div class="modal-body">
  <!-- 🔍 Suche oben, volle Breite -->
  <div class="mb-3 w-75 m-auto">
    <div class="input-group">
      <input
        type="search"
        class="form-control"
        placeholder="Search player..."
        [(ngModel)]="playerSearch"
      />
    </div>
  </div>
  <div class="check-box-container d-flex flex-wrap">
    @for (player of filteredPlayers; track player.playerId) {
      <div class="form-check flex-item">
        <div class="d-flex align-items-center justify-content-between">
          <span class="text-color">{{ player.playerName }}</span>

          <div class="d-flex align-items-center gap-2">
            <input
              type="checkbox"
              class="form-check-input m-0"
              [checked]="player.survivedWaves === 20"
              (change)="onPerfectToggle($event, player)"
            />
            <span class="small text-warning">Perfect</span>
          </div>
        </div>

        <select class="form-select mt-1" [(ngModel)]="player.survivedWaves">
          @for (wave of waves; track wave) {
            <option [ngValue]="wave">{{ wave }}</option>
          }
        </select>
      </div>
    }
  </div>
</div>


<div class="modal-footer">
  <button type="button" class="btn btn-warning" (click)="activeModal.dismiss()">Close</button>
  <button type="submit" (click)="activeModal.close(playerParticipated)" class=" btn btn-success">{{isUpdate ? 'Update Participants' : 'Add to event'}}</button>
</div>
