@if (vm$ | async; as vm) {
  @if (!vm.isLoading) {
    <div class="flex flex-col m-0 md:m-4">
      <!-- Top row with user input elements -->
      <div class="flex flex-wrap md:flex-nowrap justify-between items-center">
        <div class="flex items-center m-2">
          <button mat-icon-button (click)="addMonthToSelectedDate(-1)">
            <mat-icon>chevron_left</mat-icon>
          </button>
          <div class="flex items-center">
            <span class="pr-2">
              {{ vm.selectedDate | date : "MM.yyyy" }}
            </span>
            <input
              [formControl]="selectedDate"
              [matDatepicker]="picker"
              [matDatepickerFilter]="notSunday"
              [min]="minSelectableDate"
              class="invisible w-0"
              />
            <button mat-icon-button (click)="picker.open()">
              <mat-icon>today</mat-icon>
            </button>
            <mat-datepicker
              #picker
              startView="multi-year"
              (monthSelected)="setMonthAndYear($event, picker)"
              class="month-picker"
            ></mat-datepicker>
          </div>
          <button mat-icon-button (click)="addMonthToSelectedDate(1)">
            <mat-icon>chevron_right</mat-icon>
          </button>
        </div>
        <mat-chip-listbox (change)="changeSelectedType($event)">
          <mat-chip-option
            [value]="DiagrammType.Revenue"
            [selected]="vm.selectedMetric === DiagrammType.Revenue"
            >
            Umsatz
          </mat-chip-option>
          <mat-chip-option
            [value]="DiagrammType.TimePerTour"
            [selected]="vm.selectedMetric === DiagrammType.TimePerTour"
            >
            Kapazität pro Tour
          </mat-chip-option>
          <mat-chip-option
            [value]="DiagrammType.AverageRevenue"
            [selected]="vm.selectedMetric === DiagrammType.AverageRevenue"
            >
            Durchschnittsumsatz
          </mat-chip-option>
        </mat-chip-listbox>
      </div>
      <div
        class="my-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4"
        >
        <dks-view-type-selector
          [viewType]="DashboardViewType.BTW"
          [currentMetric]="vm.selectedMetric"
          [metrics]="vm.btwMetrics"
          [selected]="vm.selectedViewType === DashboardViewType.BTW"
          (viewTypeSelected)="setSelectedViewType(DashboardViewType.BTW)"
        ></dks-view-type-selector>
        <dks-view-type-selector
          [viewType]="DashboardViewType.TSW"
          [currentMetric]="vm.selectedMetric"
          [metrics]="vm.tswMetrics"
          [selected]="vm.selectedViewType === DashboardViewType.TSW"
          (viewTypeSelected)="setSelectedViewType(DashboardViewType.TSW)"
        ></dks-view-type-selector>
        <dks-view-type-selector
          [viewType]="DashboardViewType.KTW"
          [currentMetric]="vm.selectedMetric"
          [metrics]="vm.ktwMetrics"
          [selected]="vm.selectedViewType === DashboardViewType.KTW"
          (viewTypeSelected)="setSelectedViewType(DashboardViewType.KTW)"
        ></dks-view-type-selector>
        <dks-view-type-selector
          [viewType]="DashboardViewType.Gesamt"
          [currentMetric]="vm.selectedMetric"
          [metrics]="vm.combinedMetrics"
          [selected]="vm.selectedViewType === DashboardViewType.Gesamt"
          (viewTypeSelected)="setSelectedViewType(DashboardViewType.Gesamt)"
        ></dks-view-type-selector>
      </div>
      <!-- Visualisation -->
      <mat-card
        appearance="outlined"
        class="grid grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4"
        >
        <mat-card-content>
          @switch (vm.selectedViewType) { @case (DashboardViewType.BTW) {
            <div class="col-span-2 lg:col-span-4 w-full">
              <dks-metric-summary
                [metrics]="vm.btwMetrics"
                [metricTimeScale]="metricTimeScale"
                [selectedMetric]="vm.selectedMetric"
                [labelFormat]="'d.M.yy'"
              ></dks-metric-summary>
            </div>
            } @case (DashboardViewType.TSW) {
            <div class="col-span-2 lg:col-span-4 w-full">
              <dks-metric-summary
                [metrics]="vm.tswMetrics"
                [metricTimeScale]="metricTimeScale"
                [selectedMetric]="vm.selectedMetric"
                [labelFormat]="'d.M.yy'"
              ></dks-metric-summary>
            </div>
            } @case (DashboardViewType.KTW) {
            <div
              class="col-span-2 lg:col-span-4 w-full rounded"
              >
              <dks-metric-summary
                [metrics]="vm.ktwMetrics"
                [metricTimeScale]="metricTimeScale"
                [selectedMetric]="vm.selectedMetric"
                [labelFormat]="'d.M.yy'"
              ></dks-metric-summary>
            </div>
            } @case (DashboardViewType.Gesamt) {
            <div
              class="col-span-2 lg:col-span-4 w-full"
              >
              <dks-metric-summary
                [metrics]="vm.combinedMetrics"
                [metricTimeScale]="metricTimeScale"
                [selectedMetric]="vm.selectedMetric"
                [labelFormat]="'d.M.yy'"
              ></dks-metric-summary>
            </div>
            } }
          </mat-card-content>
        </mat-card>
      </div>
    } @else {
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    }
  } @else {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }