<div class="pb-1 mb-4 display-6 border-bottom border-danger">
  Übersicht der Ausbildung
</div>

<div class="col-md-3">
<mat-form-field appearance="standard">
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Suche ..." #input>
</mat-form-field>
</div>
<div class="col-md-1 pl-5">
    &nbsp;
</div>
<div class="row">
    <div class="tabelle col-md-4" mat-elevation-z8 #TABLE>     
        <table style="width: 100%" mat-elevation-z8 mat-table class="lehrlingstabelle" [dataSource]="datasource" id="lehrlingstabelle" 
            matSort aria-label="Lehrlinge">
            <!-- Id Column -->
            <ng-container matColumnDef="apprenticeid">
            <th mat-header-cell class="kopf col-1"  *matHeaderCellDef mat-sort-header>Id</th>
            <td mat-cell *matCellDef="let row">{{row.apprenticeid}}</td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="firstname">
            <th mat-header-cell class="kopf col-1"  *matHeaderCellDef mat-sort-header>Vorname</th>
            <td mat-cell *matCellDef="let row">{{row.firstname}}</td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="lastname">
            <th mat-header-cell class="kopf col-1"  *matHeaderCellDef mat-sort-header>Name</th>
            <td mat-cell *matCellDef="let row">{{row.lastname}}</td>
            </ng-container>
            <!-- Name Column -->
            <ng-container matColumnDef="groupname">
                <th mat-header-cell class="kopf col-1"  *matHeaderCellDef mat-sort-header>Gruppe</th>
                <td mat-cell *matCellDef="let row">{{row.groupname}}</td>
                </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

        <mat-paginator #paginator
            [length]="datasource?.data?.length"
            [pageIndex]="0"
            [pageSize]="10"
            [pageSizeOptions]="[5, 10, 20]"
            aria-label="Seite wählen">
        </mat-paginator>
    </div>
    
    <div class="container col-md-8 mat-elevation-z8 bg-white" id="lehrlingTab">  
      <div class="ueberschrift">Lehrling</div>
    <mat-tab-group mat-align-tabs="start">
      <mat-tab label="Kompetenz">
        <br><br>Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt
      </mat-tab>
      <mat-tab label="Module">
        <br><br>Hier werden die erworbenen und noch fehlenden Module des ausgewählten Lehrlings angezeigt
      </mat-tab>
      <mat-tab label="Prüfungen">
        <br><br>Hier werden die absolvierten und noch fehlenden Prüfungen des ausgewählten Lehrlings angezeigt
      </mat-tab>
      <mat-tab label="Anmerkungen">
        <br><br>Hier können Anmerkungen zum ausgewählten Lehrlings angezeigt oder eingetragen werden.
      </mat-tab>
    </mat-tab-group>          
    </div> 
</div>