<div class="card" *ngIf="team">
  <div class="title-row">
    <span class="name" id="teamName">{{ team.name }} ({{ translateRolename(roleName) }})</span>
    <div>Spieleranzahl: {{ team.players?.length }} (aktiv: {{ activePlayerCount }}) </div>
  </div>
  <div class="flex-row">
    <div>Saldo: {{ team.balance | currency:'EUR' }}</div>
    <div>Ausstehend: {{ team.outstanding | currency:'EUR' }}
    </div>
  </div>
  <mat-divider style="margin-top: 4px"></mat-divider>
  <div class="flex-row" style="margin-top: 4px;">
    
    <button mat-icon-button color="primary" aria-label="Back" (click)="back()" matTooltip="Zurück">
      <mat-icon>arrow_back</mat-icon>
    </button>
    <button mat-button mat-raised-button color="primary" (click)="openTeamTransactionDialog()" [disabled]="isLoading || !canDoTransactions">Buchung</button>
    <button mat-button mat-stroked-button color="accent" (click)="onAllClick()" [disabled]="isLoading || !canDoTransactions" matTooltip="Buchung für alle Spieler anlegen">Umlage</button>
    

    <button mat-icon-button color="primary" matTooltip="Verwaltung" [matMenuTriggerFor]="menu" [disabled]="isLoading">
      <mat-icon>menu</mat-icon>
    </button>
</div>


</div>

<mat-tab-group>
  <mat-tab label="Buchungen"> 
    <ng-container *ngTemplateOutlet="playerList"></ng-container>  
  </mat-tab>s

  <mat-tab label="Bearbeiten"> 
    <div class="mat-tab__content flex-row break" style="overflow: auto;">
      <app-player-card *ngFor="let player of team?.players" class="card" [player]="player" 
      matRipple (click)="openPlayerdetails(player)" (onReload)="loadTeamDetails()" ></app-player-card>
    </div>  
  </mat-tab>
</mat-tab-group>


<ng-template #playerList>
  <div class="mat-tab__content">
    <div class="flex-row">
      <div></div>
      <div class="select_all" (click)="selectAll()">Alle</div>
    </div>
    
    <div class="card list">
      <mat-form-field style="width: 100%;" (keyup)="filter($event)">
        <mat-label>Suche</mat-label>
        <input type="text" matInput >
      </mat-form-field>
      <mat-selection-list #players id="playerlist" [(ngModel)]="selectedPlayers">
        <ng-container *ngFor="let p of team?.players" >

          <mat-list-option [value]="p" *ngIf="!p.hide && p.active">
            <div matListItemTitle [class.highlight]="p.usersPlayer">{{ p.firstName}} {{ p.lastName }} <span *ngIf="p.usersPlayer">- Ich</span> </div>
            <div matListItemLine>{{ p.balance | currency:'EUR'}}</div>
            
          </mat-list-option>

        </ng-container>
        
      </mat-selection-list>
    </div>
  </div>
</ng-template>

<div class="card">

  <div class="flex-row" style="height: 48px; overflow: hidden; justify-content: flex-end;" *ngIf="isLoading">
    <mat-spinner diameter="38"></mat-spinner>
  </div>
    
    <div class="flex-row" *ngIf="!isLoading">
        
        <span *ngIf="players && players.selectedOptions.selected.length > 0">{{players.selectedOptions.selected.length}} Spieler gewählt</span>
        <span *ngIf="players && players.selectedOptions.selected.length == 0">Spieler für einen Eintrag wählen</span>
        <button mat-button mat-raised-button color="primary" (click)="openDialog()"
        [disabled]="players.selectedOptions.selected.length == 0 || !canDoTransactions" id="buttonNewTransaction" 
        matTooltip="Transaktionen für die gewählten Spieler anlegen">Buchung anlegen</button>
    </div>
</div>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onAddPlayerClick()" [disabled]="!canInvite">Spieler hinzufügen</button>
  <button mat-menu-item (click)="onCreateLink()" [disabled]="selectedPlayers.length != 1 || !canInvite">Registrierungslink erstellen</button>
  <button mat-menu-item (click)="onShowPrivileges()">Berechtigungen</button>
  <button mat-menu-item (click)="onShowTeamTransactions()">Transaktionshistorie</button>
</mat-menu>