<mat-card class="transparent">
  <div class="FloatLeftAndCenterElement">
    <div class="newStartButtonLeft">
      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
    </div>
    <div class="CenterText">
      <h2>{{membership}}</h2>
    </div>
  </div>
  <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
    <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
  </button>
  <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
    <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
  </button>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
  <mat-card-title>Spielstand</mat-card-title>
  <mat-card-content>
    <br>
    <table>
      <tr>
        <th>Team rot</th>
        <th>Team blau</th>
      </tr>
      <tr>
        <th class = "redfont">{{gameStatus.red}}</th>
        <th class = "bluefont">{{gameStatus.blue}}</th>
      </tr>
    </table>
  </mat-card-content>
  <mat-card-actions>
    <br>
    <br>
    <div *ngIf="isActiveRound" class="spinner-wrapper">
      <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
      <mat-spinner diameter="30"></mat-spinner>
    </div>
    <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
    <br>
    <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
  </mat-card-actions>
</mat-card>