@if (metricsSummary$ | async; as summary) {
  <div class="m-auto flex flex-col">
    <div class="flex items-center justify-end">
      <span class="text-base">{{
        summary.revenue | currency : 'EUR' : 'symbol' : '1.2-2'
      }}</span>
      <div class="p-1 text-sm" title="Umsatz">
        <mat-icon>euro</mat-icon>
      </div>
    </div>
    <div class="flex items-center justify-end">
      <span class="text-base">{{
        summary.personnelCost | currency : 'EUR' : 'symbol' : '1.2-2'
      }}</span>
      <div class="p-1 text-sm" title="Personalkosten">
        <mat-icon>people</mat-icon>
      </div>
    </div>
    <div class="flex items-center justify-end">
      <span class="text-base">{{
        summary.consumptionCost | currency : 'EUR' : 'symbol' : '1.2-2'
      }}</span>
      <div class="p-1 text-sm" title="Verbrauch">
        <mat-icon>local_shipping</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="Umsatz Vorausschau">
        <mat-icon>account_balance</mat-icon>
      </div>
    </div> -->
  </div>
}
