<mat-card appearance="raised">
  <mat-card-header class="flex justify-center">
    <mat-card-title>{{ text }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="flex">
      <div class="flex flex-col justify-end items-center">
        <div class="p-1 text-sm" title="Verfügbare Zeit"><mat-icon>departure_board</mat-icon></div>
        <div class="p-1 text-sm" title="Menge Touren"><mat-icon>local_shipping</mat-icon></div>
        <div class="p-1 text-sm" title="Deckungsbeitrag"><mat-icon>account_balance</mat-icon></div>
      </div>
      @for (kpi of kpis; track kpi; let idx = $index) {
        <div
          class="w-1/3 flex flex-col justify-center items-center"
          >
          <div
            class="font-bold"
            style="border-color: var(--mat-sys-primary);"
            [ngClass]="{ 'border-b-2': (currentTimeSlot$ | async) === idx }"
            >
            {{ kpi.interval.start | date: 'HH:mm' }} -
            {{ kpi.interval.end | date: 'HH:mm' }}
          </div>
          <div class="p-4 text-base">
            {{ kpi.kpi.value.toString().replace('.', ',') }}
          </div>
          <div class="p-2 flex justify-center items-center text-sm">
            {{ kpi.kpi.meta.availableTime }}
          </div>
          <div class="p-2 flex justify-center items-center text-sm">
            {{ kpi.kpi.meta.tourAmount }}
          </div>
          <div class="p-2 flex justify-center items-center text-sm">
            {{ kpi.kpi.meta.breakEven}}€
          </div>
        </div>
      }
    </div>
  </mat-card-content>
</mat-card>
