PlayerManagement/Ui/src/app/pages/player/player.component.html

<div class="container mt-3 pb-5">
<h2 class="text-center">Alliance Players</h2>
  <div class="d-flex justify-content-end">
    <button (click)="onAddNewPlayer()" class="btn btn-info mb-3">Add new Player</button>
  </div>

  <h5 class="mb-3"><span class="badge text-bg-dark">Members: {{players.length}}/100</span></h5>

  @if (players.length > 0) {
    <form>
      <div class="mb-3 row">
        <label for="table-filtering-search" class="col-xs-3 col-sm-auto col-form-label">Search Player:</label>
        <div class="col-xs-3 col-sm-auto">
          <input id="table-filtering-search" class="form-control" type="text" [formControl]="filter" />
        </div>
      </div>
      <div class="d-flex mb-2">
        <div class="form-check form-check-inline">
          <input (change)="onRankFilterChange($event)" class="form-check-input" type="radio" name="inlineRadioOptions" id="all" value="ALL" checked>
          <label class="form-check-label" for="all">All</label>
        </div>
        <div class="form-check form-check-inline">
          <input (change)="onRankFilterChange($event)" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="R4">
          <label class="form-check-label" for="inlineRadio1">R4 (<span class="text-primary">{{r4Players.length}}</span>)</label>
        </div>
        <div class="form-check form-check-inline">
          <input (change)="onRankFilterChange($event)" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="R3">
          <label class="form-check-label" for="inlineRadio2">R3 (<span class="text-primary">{{r3Players.length}}</span>)</label>
        </div>
        <div class="form-check form-check-inline">
          <input (change)="onRankFilterChange($event)" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="R2">
          <label class="form-check-label" for="inlineRadio3">R2 (<span class="text-primary">{{r2Players.length}}</span>)</label>
        </div>
        <div class="form-check form-check-inline">
          <input (change)="onRankFilterChange($event)" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="R1">
          <label class="form-check-label" for="inlineRadio4">R1 (<span class="text-primary">{{r1Players.length}}</span>)</label>
        </div>
      </div>

    </form>
    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
        <tr>
          <th scope="col">Player</th>
          <th scope="col">Level</th>
          <th scope="col">Rank</th>
          <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
          @for (player of filteredPlayers | paginate: { itemsPerPage: itemsPerPage, currentPage: page, id: 'playerTable'}; track player.id) {
            <tr>
              <td>
                <div class="row">
                  <div class="col">
                    {{player.playerName}}
                  </div>
                  <div class="col">
                    <i (click)="onGoToPlayerInformation(player)" class="bi custom-info-icon bi-info-circle-fill"></i>
                  </div>
                </div>
              </td>
              <td>{{player.level}}</td>
              <td>{{player.rankName}}</td>
              <td>
                <div class="d-flex gap-3 justify-content-around">
                  <i (click)="onEditPlayer(player)" class="bi custom-edit-icon bi-pencil-fill"></i>
                  <i (click)="onDeletePlayer(player)" class="bi custom-delete-icon bi-trash3"></i>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>

        <pagination-controls class="custom-pagination" [responsive]="true" [id]="'playerTable'" (pageChange)="page = $event"></pagination-controls>
  } @else {
    <div class="alert alert-secondary text-center mt-5" role="alert">
      No registered players
    </div>
  }

</div>