<div class="main-content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header card-header-danger">
                <h4 class="card-title ">TCP</h4>
                <p class="card-category"> Technique de compilation</p>
            </div>
            <div class="card-body">
                <!-- Filter with input text -->
                <!-- <mat-form-field appearance="standard">
                    <mat-label>Filter</mat-label>
                    <input matInput (keyup)="applyFilter($event)" placeholder="Search columns" #input>
                </mat-form-field>

                <table mat-table [dataSource]="dataSource" class="table">
                    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
                        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
                        <td mat-cell *matCellDef="let emp">{{ emp[column] }}</td>
                    </ng-container>
                    
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let emprow; columns: displayedColumns"></tr>
                </table> -->
                
                <!-- Filter by dropdown -->
                <mat-form-field appearance="fill" *ngFor="let empfilter of empFilters">
                    <mat-label>{{empfilter.name}}</mat-label>
                    <mat-select [(value)]="empfilter.defaultValue" (selectionChange)="applyEmpFilter($event,empfilter)">
                      <mat-option *ngFor="let op of empfilter.options" [value]="op">
                        {{op}}
                      </mat-option>
                    </mat-select>
                </mat-form-field>
                
                <table mat-table [dataSource]="dataSourceFilters" class="table">
                    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
                        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
                        <td mat-cell *matCellDef="let emp"> {{emp[column]}} </td>
                    </ng-container>
                
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let emprow; columns: displayedColumns;"></tr>
                
                </table>
            </div>
        </div>
    </div>
</div>