<div class="mat-elevation-z2">
  <table
    mat-table
    [dataSource]="data"
    multiTemplateDataRows
    class="full-width-table"
    matSort
    aria-label="Fahrzeuge"
    >
    @for (column of columns; track column) {
      <ng-container matColumnDef="{{ column.id }}">
        <th mat-header-cell *matHeaderCellDef>{{ column.title }}</th>
        <td mat-cell *matCellDef="let carData" [ngClass]="{'bg-gray-50': carData.carName === 'Touren ohne Zuweisung'}">{{ carData[column.id] }}{{(column.id !=='carName' && carData.carName === 'Touren ohne Zuweisung') ? 'T' : ''}}</td>
      </ng-container>
    }

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let carData" [attr.colspan]="displayedColumns.length">
        <div class="overflow-hidden flex flex-col items-start pl-0 md:pl-8" [@detailExpand]="carData === expandedCarData ? 'expanded' : 'collapsed'">
          @for (detail of carData.additionalData; track detail; let idx = $index) {
            <div class="flex">
              <div class="pr-2 md:px-4">
                <span class="text-base font-semibold">{{getSlotTitleByIndex(idx)}}</span>
              </div>
              <div class="px-2 md:px-4 w-20 md:w-32 flex items-center justify-end">
                <span class="pr-2 text-base">{{detail.availableTime}}</span><mat-icon title="Verfügbare Zeit">departure_board</mat-icon>
              </div>
              <div class="px-2 md:px-4 w-20 md:w-32 flex items-center justify-end">
                <span class="pr-2 text-base">{{detail.tourAmount}}</span><mat-icon title="Menge Touren">local_shipping</mat-icon>
              </div>
              <div class="px-2 md:px-4 w-20 md:w-32 flex items-center justify-end">
                <span class="pr-2 text-base">{{detail.breakEven}}€</span><mat-icon title="Deckungsbeitrag">account_balance</mat-icon>
              </div>
            </div>
          }
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let carData; columns: displayedColumns"
      (click)="setExpandedCarData(carData)"
    ></tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="!h-0"></tr>
  </table>
</div>
