<!-- class="py-5 w-full flex flex-col justify-center items-center bg-white shadow rounded cursor-pointer transition ease-in-out hover:shadow-md hover:scale-105 duration-200" -->
@if (metricSummary$ | async; as summary) {
  <mat-card
    appearance="raised"
    class="cursor-pointer transition ease-in-out hover:scale-105 duration-200"
  [ngClass]="{
    '!border': selected
  }"
    style="border-color: var(--mat-sys-primary)"
    (click)="setSelectedViewType()"
    >
    <mat-card-header class="!pb-2 justify-center">
      <mat-card-title>{{ viewType }}</mat-card-title>
    </mat-card-header>
    <!-- <span class="text-lg pb-4">{{ viewType }}</span> -->
    <mat-card-content class="!flex justify-center">
      @switch (currentMetric) { @case (DiagrammType.TimePerTour) {
        <div class="w-1/4 flex flex-col items-end">
          <div class="flex items-center pb-2" title="Touren Menge">
            {{ summary.tourAmount.toFixed(2) }}
            <mat-icon class="mx-2">local_shipping</mat-icon>
          </div>
          <div class="flex items-center" title="Verfügbare Zeit">
            {{ summary.availableTime.toFixed(2) }}
            <mat-icon class="mx-2">departure_board</mat-icon>
          </div>
        </div>
        } @case (DiagrammType.Revenue) {
        <div class="w-1/4 flex flex-col items-end">
          <div class="flex items-center pb-2" title="Umsatz">
            {{ summary.revenue | currency : "EUR" : "symbol" : ".2" }}
            <mat-icon class="mx-2">euro</mat-icon>
          </div>
          <div class="flex items-center" title="Deckungsbeitrag">
            {{ summary.breakEven | currency : "EUR" }}
            <mat-icon class="mx-2">account_balance</mat-icon>
          </div>
        </div>
        } @case (DiagrammType.AverageRevenue) {
        <div class="w-1/4 flex flex-col items-end">
          <div class="flex items-center pb-2" title="Durchschnittlicher Umsatz">
            <span class="mr-1">Ø</span>
            {{ summary.averageRevenue | currency : "EUR" }}
          </div>
          <div class="flex items-center" title="Zeit pro Tour Index">
            {{ calculateIndex(summary).toFixed(2) }}
            <span class="mx-2">Index</span>
          </div>
        </div>
        } }
      </mat-card-content>
    </mat-card>
  }
