@if (vm$ | async; as vm) {
  <div
    class="flex flex-col m-0 md:m-4"
    >
    <div class="flex flex-wrap md:flex-nowrap">
      <!-- KPI -->
      <dks-time-per-tour-kpi
        class="w-full md:w-1/3 m-2 cursor-pointer rounded-xl transition ease-in-out hover:scale-105 duration-200"
      [ngClass]="{
        'border': vm.selectedOrdinanceType === OrdinanceTypes.BTW
      }"
        style="border-color: var(--mat-sys-primary);"
        [text]="OrdinanceTypes.BTW"
        [kpis]="vm.btwKPI.summaries"
        (click)="setSelectedOrdinanceType(OrdinanceTypes.BTW)"
      ></dks-time-per-tour-kpi>
      <dks-time-per-tour-kpi
        class="w-full md:w-1/3 m-2 cursor-pointer rounded-xl transition ease-in-out hover:scale-105 duration-200"
      [ngClass]="{
        'border': vm.selectedOrdinanceType === OrdinanceTypes.TSW
      }"
        style="border-color: var(--mat-sys-primary);"
        [text]="OrdinanceTypes.TSW"
        [kpis]="vm.tswKPI.summaries"
        (click)="setSelectedOrdinanceType(OrdinanceTypes.TSW)"
      ></dks-time-per-tour-kpi>
      <dks-time-per-tour-kpi
        class="w-full md:w-1/3 m-2 cursor-pointer rounded-xl transition ease-in-out hover:scale-105 duration-200"
      [ngClass]="{
        'border': vm.selectedOrdinanceType === OrdinanceTypes.KTW
      }"
        style="border-color: var(--mat-sys-primary);"
        [text]="OrdinanceTypes.KTW"
        [kpis]="vm.ktwKPI.summaries"
        (click)="setSelectedOrdinanceType(OrdinanceTypes.KTW)"
      ></dks-time-per-tour-kpi>
    </div>
    @if (vm.selectedOrdinanceType) {
      <div
        class="md:p-2 flex flex-wrap md:flex-nowrap"
        >
        <!-- Data Table -->
        <mat-card appearance="outlined" class="w-full">
          <mat-card-content>
            @switch (vm.selectedOrdinanceType) {
              @case (OrdinanceTypes.BTW) {
                <dks-time-per-tour-by-car
                  [columns]="vm.btwKPI.cars.columns"
                  [data]="vm.btwKPI.cars.data"
                  class="w-full"
                ></dks-time-per-tour-by-car>
              }
              @case (OrdinanceTypes.TSW) {
                <dks-time-per-tour-by-car
                  [columns]="vm.tswKPI.cars.columns"
                  [data]="vm.tswKPI.cars.data"
                  class="w-full"
                ></dks-time-per-tour-by-car>
              }
              @case (OrdinanceTypes.KTW) {
                <dks-time-per-tour-by-car
                  [columns]="vm.ktwKPI.cars.columns"
                  [data]="vm.ktwKPI.cars.data"
                  class="w-full"
                ></dks-time-per-tour-by-car>
              }
            }
          </mat-card-content>
        </mat-card>
      </div>
    }
  </div>
} @else {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}