Untitled

<!-- <mat-toolbar color="primary">
  <span>CRUD Application</span>
  <span class="example-spacer"></span>
  <button mat-raised-button (click)="openAddEditEmpForm()">
    ADD EMPLOYEE
  </button>
</mat-toolbar> -->
<!-- <header>
    <mat-toolbar color="primary">
      <span>CRUD Application</span>
      <span class="example-spacer"></span>
      <button mat-raised-button routerLink="/">
        EMPLOYEE LIST
      </button>
      <button mat-raised-button routerLink="/create-employee">
        ADD EMPLOYEE
      </button>
    </mat-toolbar>
  </header> -->


<main>
  <router-outlet></router-outlet>

  <div class="main-body">

    <mat-form-field>
      <mat-label>Search</mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Filter by Company</mat-label>
      <mat-select [(ngModel)]="selectedCompany" (selectionChange)="applyCompanyFilter()">
        <mat-option *ngFor="let company of uniqueCompanies" [value]="company">
          {{ company }}
        </mat-option>
      </mat-select>

    </mat-form-field>



    <div class="table-container">
      <table mat-table [dataSource]="dataSource" matSort>

        <!-- ID Column-->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
          <td mat-cell *matCellDef="let row">{{row.id}}</td>
        </ng-container>
        <!-- First Name Column-->
        <ng-container matColumnDef="firstName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
          <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
        </ng-container>
        <!-- last name Column-->
        <ng-container matColumnDef="lastName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
          <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
        </ng-container>
        <!-- email Column-->
        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
          <td mat-cell *matCellDef="let row">{{row.email}}</td>
        </ng-container>
        <!-- date of birth Column-->
        <ng-container matColumnDef="dob">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> dob </th>
          <td mat-cell *matCellDef="let row">{{row.dob | date }}</td>
        </ng-container>
        <!-- gender Column-->
        <ng-container matColumnDef="gender">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> gender </th>
          <td mat-cell *matCellDef="let row">{{row.gender}}</td>
        </ng-container>
        <!-- education Column-->
        <ng-container matColumnDef="education">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Education </th>
          <td mat-cell *matCellDef="let row">{{row.education}}</td>
        </ng-container>
        <!-- company Column-->
        <ng-container matColumnDef="company">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Company </th>
          <td mat-cell *matCellDef="let row">{{row.company}}</td>
        </ng-container>
        <!-- experience Column-->
        <ng-container matColumnDef="experience">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Experience </th>
          <td mat-cell *matCellDef="let row">{{row.experience}}</td>
        </ng-container>
        <!-- package Column-->
        <ng-container matColumnDef="package">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Package </th>
          <td mat-cell *matCellDef="let row">{{row.package | number}} VND</td>
        </ng-container>

        <ng-container matColumnDef="action">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
          <td mat-cell *matCellDef="let row">
            <button mat-icon-button color="primary" (click)="openEditForm(row)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button color="warn" (click)="deleteEmployee(row.id)">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>

        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
        </tr>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5,10,25,100]" aria-label="Select page of users"></mat-paginator>

    </div>

  </div>

</main>
<footer>
  <!-- Đặt phần footer cố định ở đây -->
</footer>