<!-- <div *ngFor="let transaction of transactions" class="row">
  <div class="amount">{{transaction.amount | currency }}</div>
  <div class="date"> {{ transaction.date | date }}</div>
  <div class="date"> {{ transaction.createdAt | date }}</div>
  <div class="date"> {{ transaction.note }}</div>

</div> -->

<div>
  <div id="userBalance" class="balance" [ngClass]="{'pos': data.user.balance >= 0, 'neg': data.user.balance < 0}"><span style="font-weight: 300">{{ data.user.firstName }}:</span> {{ data.user.balance | currency:'EUR' }}</div>
</div>

@if(isLoading) {
  <mat-spinner style="align-self: center; margin: 48px;"></mat-spinner>
} @else if (transactions.length > 0) {
  <mat-list class="list" id="transactionsList">

    <mat-list-item *ngFor="let transaction of transactions">
      <span matListItemTitle>{{ transaction.date | date }}</span>
      <span matListItemLine>
        <span class="amount" [class.negative]="transaction.type.id > 9">
          <ng-container *ngIf="transaction.type.id > 9">-</ng-container>
        {{transaction.amount | currency:'EUR' }}
        </span>
        {{ transaction.type.name | translate }}
        -
        {{ transaction.note }}
      </span>
    </mat-list-item>
  
  
  </mat-list>
} @else {
  <div style="align-self: center; margin: 48px;">Es sind keine Einträge vorhanden</div>
}



<!-- <div>
  <div class="actions">
    <div>Für <span class="name">{{ data.user.firstName}}</span></div>
    <div class="actions__buttons">
      <button mat-flat-button color="primary" disabled>Beantragen</button>
      <button mat-flat-button color="warn" disabled>Beanstanden</button>
      
    </div>
  </div>
</div> -->