<div class="row">
  <div class="col">
    <button (click)="changePage(-1)" class="btn btn-primary">Prev Page</button>
    <button (click)="changePage(1)" class="btn btn-primary">Next Page</button>
  </div>
</div>

<table *ngIf="staffMembers.length !== 0" class="table">
  <thead>
    <tr>
      <th scope="col" class="text-right">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col" class="text-right">Brands expertise</th>
      <th scope="col" class="text-right">Average Robot Price</th>
      <th scope="col" class="text-right">Average Robot Features</th>
      <th scope="col" class="text-right">Average Robot Experts</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let staffMember of staffMembers">
      <th scope="row" class="text-right">{{ staffMember.id }}</th>
      <td>{{ staffMember.name }}</td>
      <td>{{ staffMember.email }}</td>
      <td class="text-right">{{ getBrandsExpertiseCount(staffMember) }}</td>
      <td class="text-right">
        {{ getAverageRobotPrice(staffMember) | currency: undefined:"symbol":"1.0-0" }}
      </td>
      <td class="text-right">{{ getAverageRobotFeatures(staffMember) }}</td>
      <td class="text-right">{{ getAverageRobotExpertsCount(staffMember) }}</td>
    </tr>
  </tbody>
</table>

<div class="container">
  <p *ngIf="isLoading" class="text-center">
    Loading table data. Please wait for a few seconds as this can be slow, depending on how big the
    data seed is.
  </p>

  <p *ngIf="!isLoading && isError" class="text-center">
    There was an error while loading the data. Try fixing it.
  </p>

  <p *ngIf="!isLoading && !isError && staffMembers.length === 0" class="text-center">
    No data available. Use the data seed to fill in the DB with dummy data.
  </p>
</div>
