<div class="card">
    <h5>Candidates List</h5>
    <div><button [routerLink]="'/dasboard/dasboard'" type="button" class="primary">Add</button><br></div>
    <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Emails</th>
          </tr>
        </thead>
        <tbody>
          <tr  *ngFor="let candidate of candidates | async">
                <td>{{candidate.id}}</td>
                <td>{{candidate.firstName}}</td>
                <td>{{candidate.lastName}}</td>
                <td>
                    <tr *ngFor="let ml of candidate.emails">
                      <span>{{ml.email}}</span>
                      <span> - {{ml.type}}</span>
                    </tr>
                </td>
                <td>
                  <button  icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="show(candidate)">edit</button>
                  <button  icon="pi pi-trash" class="p-button-rounded p-button-warning">delete</button>
               </td>
          </tr>
        </tbody>
      </table>
      <div>
        <form name="editForm" role="form">
            <button>Search</button>
        </form>
      </div>

      <div *ngIf="isEdit">
        <app-candidat-detail></app-candidat-detail>
    </div>
   <!-- <button [routerLink]="'/candidate/candidate-sidebar'" pButton pRipple type="button" label="Add" class="mr-2 mb-2"></button> -->
   <!--  <p-table #dt  [value]="theCandidates" [paginator]="true" [rows]="5" [showCurrentPageReport]="true" responsiveLayout="scroll"
        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5,10,25,50]">
        <ng-template pTemplate="header">
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Emails</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-candidate>
            <tr>
                <td>{{candidate.id}}</td>
                <td>{{candidate.firstname}}</td>
                <td>{{candidate.lastname}}</td>
                <td>
                    <tr *ngFor="let ml of candidate.emails">
                      <span>{{ml.email}}</span>
                      <span> - {{ml.type}}</span>
                    </tr>
                </td>
                <td>
                  <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"></button>
                  <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning"></button>
               </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="paginatorleft">
          <span class="p-float-label">
            <input type="text" class="w-full" pInputText>
            <label>Search</label>
          </span>
        </ng-template>
    </p-table> -->
</div>
