@if (metricsSummary$ | async; as summary) {
  <div class="m-auto flex flex-col">
    <div class="flex items-center justify-end">
      <span class="text-base">{{ summary.tourAmount | number : '1.2-2' }}</span>
      <div class="p-1 text-sm" title="Menge Touren">
        <mat-icon>local_shipping</mat-icon>
      </div>
    </div>
    <!-- TODO: Add feature toggle for forecast -->
    <!-- <div class="flex items-center justify-end text-yellow-500">
    <span class="text-base">+{{ summary.forecast | number : '1.0-0' }}</span>
    <div class="p-1 text-sm" title="Vorausschau">
      <mat-icon>local_shipping</mat-icon>
    </div>
  </div> -->
  <div class="flex items-center justify-end">
    <span class="text-base"
      >{{ summary.availableTime | number : '1.2-2' }} h</span
      >
      <div class="p-1 text-sm" title="Verfügbare Zeit">
        <mat-icon>departure_board</mat-icon>
      </div>
    </div>
    <div class="flex items-center justify-end">
      <span class="text-base">{{
        summary.breakEven | currency : 'EUR' : 'symbol' : '1.2-2'
      }}</span>
      <div class="p-1 text-sm" title="Deckungsbeitrag">
        <mat-icon>account_balance</mat-icon>
      </div>
    </div>
    <!-- TODO: Add feature toggle for forecast -->
    <!-- <div class="flex items-center justify-end text-yellow-500">
    <span class="text-base"
      >+{{
      summary.forecastRevenue | currency : 'EUR' : 'symbol' : '1.2-2'
      }}</span
      >
      <div class="p-1 text-sm" title="Vorausschau">
        <mat-icon>account_balance</mat-icon>
      </div>
    </div> -->
  </div>
}
