<mat-toolbar color="primary" class="toolbar">

  <span>{{ teamsService.team?.name }}</span>
  <button mat-button (click)="onLoginClick()">Login</button>

</mat-toolbar>

<div class="team-info mat-elevation-z2">
  <ng-container *ngIf="teamsService && teamsService.team">
    <div style="text-align: center;" matTooltip="Aktuell in der Kasse">
      Kontostand: {{ teamsService.team.balance | currency:'EUR' }}
    </div>
    <div style="text-align: center;"
      [matTooltip]="teamsService.team.outstanding > 0 ? 'Die Spieler schulden der Mannschaftskasse diesen Betrag ' 
      : 'Die Mannschaftskasse schuldet den Spielern diesen Betrag'">
      Ausstehend: {{ teamsService.team.outstanding | currency:'EUR' }}
    </div>
    <div style="text-align: center;" matTooltip="Theoretisch in der Kasse">
      Total: {{ teamsService.team.outstanding + teamsService.team.balance | currency:'EUR' }}
    </div>
  </ng-container>

  

</div>

<div class="flex-row" style="margin: 12px 24px -24px 24px; align-items: flex-start; justify-content: center; gap: 24px">
  <mat-form-field style="flex: 1 1 auto; " appearance="outline">
    <mat-label>Suche</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Name" #input type="search" (search)="applyFilter($event)">
  </mat-form-field>
  
  <button mat-raised-button (click)="openPenalties()">
    Strafenkatalog
  </button>
</div>
<div class="table-container mat-elevation-z2">

  
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort (matSortChange)="announceSortChange($event)" matSortActive="balance" matSortDirection="asc">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
  
    <!-- Position Column -->
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by firstName"> Vorname </th>
      <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
      <td mat-footer-cell *matFooterCellDef>  </td>
    </ng-container>
  
    <!-- Name Column -->
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by lastName"> Nachname </th>
      <td mat-cell *matCellDef="let element" [class.blurr]="false"> {{element.lastName}} </td>
      <td mat-footer-cell *matFooterCellDef> Total </td>
    </ng-container>
  
    <!-- Weight Column -->
    <ng-container matColumnDef="balance">
      <th mat-header-cell *matHeaderCellDef class="align-end" mat-sort-header sortActionDescription="Sort by number"> Saldo </th>
      <td mat-cell *matCellDef="let element" class="align-end"> {{element.balance | currency:'EUR' }} </td>
      <td mat-footer-cell *matFooterCellDef> {{getTotalBalance() | currency:'EUR' }} </td>
    </ng-container>
  

  
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openDetails(row)" class="table-row"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
  </table>
</div>