<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"> <i class="bi bi-person-plus"></i> Add new Player</button>
    <button (click)="onAddImportFromExcel()" class="btn btn-info mb-3 ms-3"><i class="bi bi-filetype-xlsx"></i> Import from Excel</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: pageSize, currentPage: pageNumber, id: 'playerTable'}; track player.id) {
            <tr>
              <td>
                <div class="row">
                  <div class="col">
                    {{player.playerName}}
                  </div>
                  <div class="col">
                    <i ngbTooltip="Show information" placement="auto" (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 ngbTooltip="Edit" placement="auto" (click)="onEditPlayer(player)" class="bi custom-edit-icon bi-pencil-fill"></i>
                  <i ngbTooltip="Dismiss" placement="auto" (click)="onDismissPlayer(player)" class="bi custom-delete-icon bi-person-dash"></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]="'playerTable'" [responsive]="true" [autoHide]=" true"
                           (pageChange)="pageNumber = $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 > players.length ? players.length : pageNumber * pageSize }}</strong>
          of <strong>{{ players.length }}</strong> results
        </small>
      </div>
    </div>
  } @else {
    <div class="alert alert-secondary text-center mt-5" role="alert">
      No registered players
    </div>
  }

</div>
