<mat-card appearance="raised">
  <mat-card-header class="flex justify-center">
    <mat-card-title>{{ ordinanceType }}</mat-card-title>
  </mat-card-header>
  @if (toursPerTimeKPI$ | async; as kpis) {
    <mat-card-content>
      <div class="flex">
        @for (kpi of kpis; track kpi; let idx = $index) {
          <div
            class="w-1/3 flex flex-col justify-center items-center"
            style="border-color: var(--mat-sys-primary);"
        [ngClass]="{
          'border-b-2': (currentTimeSlot$ | async) === idx,
        }"
            >
            <div class="p-4 text-base">
              {{ kpi.kpi.value.toString().replace(".", ",") }}
            </div>
            <div class="font-bold">
              {{ kpi.interval.start | date : "HH:mm" }} -
              {{ kpi.interval.end | date : "HH:mm" }}
            </div>
          </div>
        }
      </div>
    </mat-card-content>
  }
</mat-card>
