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

<div class="container mt-3 pb-5">
  <h2 class="text-center">Dismissed Players</h2>

  @if (dismissedPlayers.length > 0) {
    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
        <tr>
          <th scope="col">Player</th>
          <th scope="col">Dismissed on</th>
          <th scope="col">Dismissed by</th>
          <th scope="col">Reason</th>
          <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
          @for (player of dismissedPlayers | paginate: { totalItems: totalRecord, itemsPerPage: pageSize, currentPage: pageNumber, id: 'dismissedTable'}; track player.id) {
            <tr>
              <td>{{player.playerName}}</td>
              <td>{{player.dismissedAt | date: 'dd.MM.yyyy'}}</td>
              <td>{{player.modifiedBy}}</td>
              <td>{{player.dismissalReason}}</td>
              <td>
                <div class="d-flex gap-3 justify-content-around">
                  <i ngbTooltip="Show information" placement="auto" (click)="onPlayerInformation(player)" class="bi custom-info-icon bi-info-circle-fill"></i>
                  <i ngbTooltip="Rejoining" placement="auto" (click)="onReactivePlayer(player)" class="bi custom-edit-icon bi-bootstrap-reboot"></i>
                  <i ngbTooltip="Delete" placement="auto" (click)="onDeletePlayer(player)" class="bi custom-delete-icon bi bi-trash3"></i>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <!-- Pagination Controls -->
    <div class="d-flex justify-content-between mt-3 flex-column flex-md-row">
      <pagination-controls class="custom-pagination" [id]="'dismissedTable'" [responsive]="true" [autoHide]=" true"
                           (pageChange)="pageChanged($event)"></pagination-controls>

      <!-- Showing total results with improved styling -->
      <div class="align-self-center text-muted mt-2 mt-md-0">
        <small>
          Showing
          <strong>{{ (pageNumber - 1) * pageSize + 1 }} - {{ pageNumber * pageSize > totalRecord ? totalRecord : pageNumber * pageSize }}</strong>
          of <strong>{{ totalRecord }}</strong> results
        </small>
      </div>
    </div>
  } @else {
    <div class="alert alert-secondary text-center mt-5" role="alert">
      No dismissed players
    </div>
  }
</div>