PlayerManagement/Ui/src/app/pages/vs-duel/vs-duel.component.html

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

  <div class="d-flex justify-content-center">
    <div class="alert alert-secondary w-auto text-center" role="alert">
      Current week <span class="fw-bold text-primary">{{currentDate | week}}</span>
    </div>
  </div>

  @if (!currentWeekDuelExists) {
    <div class="d-grid gap-2 col-6 mx-auto">
      <button (click)="onCreateEvent()" class="btn btn-primary" type="button">Create new VS-Duel Event</button>
    </div>
  } @else {
    <div class="d-flex justify-content-center">
    <div class="alert alert-primary text-center w-auto" role="alert">
      One event has already been recorded for this week. You can edit or delete the event
    </div>
    </div>
  }

  @if (vsDuels.length > 0) {
    <div class="mt-5 table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
        <tr>
          <th scope="col">Year</th>
          <th scope="col">Week</th>
          <th scope="col">Opponent name</th>
          <th scope="col">Opponent server</th>
          <th scope="col">Opponent power</th>
          <th scope="col">Opponent size</th>
          <th scope="col">Won</th>
          <th scope="col">League</th>
          <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
          @for (vsDuel of vsDuels | paginate: { id: 'vsDuelTable', itemsPerPage: pageSize, totalItems: totalRecord, currentPage: pageNumber}; track vsDuel.id) {
            <tr>
              <td>{{vsDuel.eventDate | date: 'yyyy'}}</td>
              <td>{{vsDuel.eventDate | week}}</td>
              <td>{{vsDuel.opponentName}}</td>
              <td>{{vsDuel.opponentServer}}</td>
              <td>{{vsDuel.opponentPower | number}}</td>
              <td>{{vsDuel.opponentSize}}</td>
              <td>
                @if (vsDuel.isInProgress) {
                  <i class="bi bi-hourglass-split"></i> In Progress
                } @else {
                  <i class="bi " [ngClass]="vsDuel.won ? 'bi-check-lg text-success' : 'bi-x-lg text-danger'"></i>
                }
              </td>
              <td>@switch (vsDuel.vsDuelLeague) {
                @case ('Silver League') {
                  <i class="bi bi-star text-white"> Silver</i>
                }
                @case ('Gold League'){
                  <i class="bi bi-trophy-fill text-warning"> Gold</i>
                }
                @case ('Diamond League') {
                  <i class="bi bi-gem text-primary"> Diamond</i>
                }
              }</td>
              <td>
                <div class="d-flex gap-3 justify-content-around">
                  <i ngbTooltip="Show details" placement="auto" (click)="onGoToVsDuelInformation(vsDuel)" class="bi custom-info-icon bi-info-circle-fill"></i>
                  <i ngbTooltip="Edit" placement="auto" (click)="onEditVsDuel(vsDuel)" class="bi custom-edit-icon bi-pencil-fill"></i>
                  <i ngbTooltip="Delete" placement="auto" (click)="onDeleteVsDuel(vsDuel)" class="bi custom-delete-icon 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]="'vsDuelTable'" [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>
  }

</div>