<div data-aos="zoom-out" data-aos-duration="250">
  <div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">
    <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
    </mat-progress-spinner>
    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
    <br>
  </div>
  <div *ngIf="view === 'desktopView'" class="TimerLeft" style="margin-top: -1.9em; margin-right: -11.5em; margin-left: auto">
    <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
    </mat-progress-spinner>
    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
  </div>
</div>
<div data-aos="zoom-out" data-aos-duration="250">
  <div style="text-align: center; margin-top: -3em;">
    <mat-card>
      <mat-card-title>
        {{cardInfo.solution}}
      </mat-card-title>
    </mat-card>

    <br>
    <mat-card>
      <h2>
        {{cardInfo.tabu1}}
      </h2>
    </mat-card>
    <mat-card>
      <h2>
        {{cardInfo.tabu2}}
      </h2>
    </mat-card>
    <mat-card>
      <h2>
        {{cardInfo.tabu3}}
      </h2>
    </mat-card>
    <mat-card>
      <h2>
        {{cardInfo.tabu4}}
      </h2>
    </mat-card>
    <mat-card>
      <h2>
        {{cardInfo.tabu5}}
      </h2>
    </mat-card>
    <br>
    <div class="marginButtons" data-aos="zoom-out" data-aos-duration="1000">
      <button class="marginButtonRight" *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
      <button class="marginButtonLeft marginButtonRight" *ngIf="isExplainer" mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
      <button *ngIf="isExplainer" class="marginButtonLeft" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
      <button *ngIf="!isExplainer" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
    </div>
    <br>
    <br>
    <mat-card class="transparent">
      <mat-card-title>Spielstand</mat-card-title>
      <mat-card-content>
        <table>
          <tr>
            <th>Team rot</th>
            <th>Team blau</th>
          </tr>
          <tr>
            <th class = "red">{{gameStatus.red}}</th>
            <th class = "blue">{{gameStatus.blue}}</th>
          </tr>
        </table>
      </mat-card-content>
    </mat-card>
  </div>
</div>
<br>
<br>
<br>
<app-round-history
  [round]="gameStatus.round"
  [canEdit]="false"
  [history]="history"
  [sessionName]="sessionName"
>
</app-round-history>
<br>
<br>
<br>