import { Component } from '@angular/core';

@Component({
  selector: 'app-overview-dashboard',
  standalone: false,
  template: `
    <div class="flex flex-col m-4">
      <div class="flex flex-wrap lg:flex-nowrap">
        <dks-tours-per-time-kpi
          class="w-full md:w-1/2 p-2"
          [ordinanceType]="'BTW'"
        ></dks-tours-per-time-kpi>
        <dks-tours-per-time-kpi
          class="w-full md:w-1/2 p-2"
          [ordinanceType]="'TSW'"
        ></dks-tours-per-time-kpi>
        <dks-tours-per-time-kpi
          class="w-full md:w-1/2 p-2"
          [ordinanceType]="'KTW'"
        ></dks-tours-per-time-kpi>
      </div>
      <div class="flex lg:flex-nowrap flex-wrap-reverse">
        <mat-card
          appearance="outlined"
          class="w-full md:flex-grow lg:w-2/5 m-2 !flex flex-col"
        >
          <mat-card-header>
            <mat-card-title> Anomalien </mat-card-title>
          </mat-card-header>
          <mat-card-content class="flex-grow">
            <dks-anomaly-tree></dks-anomaly-tree>
          </mat-card-content>
        </mat-card>
        <mat-card
          appearance="outlined"
          class="w-full md:flex-grow lg:w-2/5 m-2 !flex flex-col"
        >
          <mat-card-header>
            <mat-card-title> Mitarbeiter ohne Tour </mat-card-title>
          </mat-card-header>
          <mat-card-content class="flex-grow">
            <dks-anomaly-list></dks-anomaly-list>
          </mat-card-content>
        </mat-card>
        <mat-card appearance="outlined" class="w-full lg:w-1/5 m-2">
          <mat-card-header>
            <mat-card-title> Nächste Touren ohne Anfahrt </mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <dks-upcoming-tours></dks-upcoming-tours>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  `,
  styles: ``,
})
export class OverviewDashboardComponent {}
