<div class="shadow-2xl rounded p-2 mt-2">
<h3>Staff List</h3>
<div>
  <form>
    <div class="grid md:grid-cols-4 gap-2">
      <div class="">
        <label for="login">Email</label>
        <input id="login" pInputText name="login" type="text" [(ngModel)]="email"
          class="inputfield w-full p-inputtext-sm">
      </div>
      <div class="">
        <label for="lastname1">Surname</label>
        <input id="lastname1" pInputText name="lastname" type="text" [(ngModel)]="lastname"
          class="inputfield w-full p-inputtext-sm">
      </div>
      <div class="">
        <label for="firstname">First Name</label>
        <input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
          class="inputfield w-full p-inputtext-sm">
      </div>    
      <div class="flex items-end">
        <button pButton pRipple class="p-button-sm mr-2 " type="submit" icon="pi pi-search" iconPos="left" label="Search"
          (click)="search()"></button>
        <button pButton pRipple class="p-button-sm " type="button" icon="pi pi-user-plus" iconPos="left" label="New Staff"
          (click)="newUser()"></button>
      </div>
    </div>
  </form>
</div>
<div>
  <p-table [value]="userList" sortMode="multiple"  
      class="p-datatable-sm" [loading]="loading">
      <ng-template pTemplate="header">
        <tr>       
          <th pSortableColumn="email">Email<p-sortIcon field="email"></p-sortIcon>
          </th>
          <th pSortableColumn="lastname">Surname <p-sortIcon field="lastname"></p-sortIcon>
          </th>
          <th pSortableColumn="firstname">First Name <p-sortIcon field="firstname"></p-sortIcon>
          </th>
         
          <th >Active </th>
          <th>Edit</th>  
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-user>
          <tr>
            <td>{{user.email}}</td>
            <td>{{user.lastname}}</td>
            <td>{{user.firstname}}</td>           
            <td>     
                 
              <i class="pi" [ngClass]="{'true-icon pi-check-circle': user.active, 'false-icon pi-times-circle': !user.active}"></i>
            </td>
            <td> 
              <button pButton type="button" icon="pi pi-pencil" class="p-button-rounded p-button-text" 
                (click)="edit(user.id)"></button>
            </td>
          </tr>
      </ng-template>
    </p-table>
</div>
  
