<div class="row">
  <div class="col">
    <a [routerLink]="['/clients/add']"><button class="btn btn-primary">Add new Client</button></a>
  </div>
  <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="clients.length !== 0" class="table">
  <thead>
    <tr>
      <th scope="col" class="text-right">#</th>
      <th scope="col" class="text-center">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th scope="col" class="text-right">Address</th>
      <th scope="col" class="text-right">Notes</th>
      <th scope="col" class="text-right">Staff</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let client of clients">
      <th scope="row" class="text-right">
        <a [routerLink]="['/clients', client.id]">{{ client.id }}</a>
      </th>
      <td>{{ client.name }}</td>
      <td>{{ client.email }}</td>
      <td>{{ client.phone }}</td>
      <td class="text-right text-nowrap">{{ client.address }}</td>
      <td class="text-right">{{ client.notes }}</td>
      <td class="text-right">{{ client.expert && client.expert.id }}</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. We are informed about this and we will try our best
    to be back online as soon as possible. Try again later.
  </p>

  <p *ngIf="!isLoading && !isError && clients.length === 0" class="text-center">
    No clients available.
  </p>
</div>
