<div class="shadow-2xl rounded p-2 mt-2">
<h3>Person 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" label="New Person"
          (click)="newFamily()"></button>
         
      </div>
    </div>
  </form>
</div>
<div>
  <p-table [value]="familyList()" sortMode="multiple" dataKey="id" class="p-datatable-sm" #dt
      class="p-datatable-sm"  selectionMode="single" [(selection)]="selectedPerson"
      [paginator]="true" rowHover="true" [globalFilterFields]="['lastName', 'firstName', 'email', 'fatherName', 'motherName']"
    [rows]="20" [rowsPerPageOptions]="[10,20,50,100]"
      [loading]="loading">
      <ng-template #caption>
        <div class="flex">
          <p-button icon="pi pi-external-link" label="Export" (click)="exportExport()"
           />
            <p-iconfield iconPosition="left" class="ml-auto">
                <p-inputicon>
                    <i class="pi pi-search"></i>
                </p-inputicon>
                <input pInputText type="text" (input)="handleInput($event)" placeholder="Search keyword" />
            </p-iconfield>
        </div>
    </ng-template>
      <ng-template pTemplate="header">
        <tr>       
          
          <th pSortableColumn="lastName">Last Name <p-sortIcon field="lastName"></p-sortIcon>
          </th>
          <th pSortableColumn="firstName">First Name <p-sortIcon field="firstName"></p-sortIcon>
          </th>       
        <th pSortableColumn="sex">Sex <p-sortIcon field="sex"></p-sortIcon></th>
           <th pSortableColumn="fatherName">Father<p-sortIcon field="fatherName"></p-sortIcon>
          </th>
           <th pSortableColumn="motherName">Mother<p-sortIcon field="motherName"></p-sortIcon>
          </th>
         
          <th>Edit</th>  
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-user>
          <tr>            
            <td>{{user.lastName}}</td>
            <td>{{user.firstName}}</td>                       
            <td>{{user.sex}}</td> 
            <td>{{user.fatherName}}</td>        
            <td>{{user.motherName}}</td>        
                        
            <td> 
              <p-button type="button" icon="pi pi-ellipsis-v" 
              [rounded]="true" [text]="true" [raised]="true"
              class="p-button-rounded p-button-text" 
                (onClick)="actionClick(user.id,$event)"></p-button>
                
                
            </td>
          </tr>
      </ng-template>
    </p-table>
    <p-menu #rowmenu [model]="items" [popup]="true" (onShow)="onMenuShow()" />
</div>
  
