<mat-card *ngIf="roundHistory.length > 0" class="transparent {{redTurn}}">
  <mat-card-title>Runde {{round}}</mat-card-title>
</mat-card>
<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Answer Column -->
    <ng-container matColumnDef="answer">
      <mat-cell *matCellDef="let element">
        <button class="volleBreite" *ngIf="element.answer === answer.zeitLaueft" mat-raised-button>Zeit läuft &#9201;</button>
        <button class="volleBreite" *ngIf="element.answer === answer.zeitAbgelaufen" mat-raised-button>Zeit abgelaufen &#9201;</button>
        <button class="volleBreite" *ngIf="element.answer === answer.richtig" mat-raised-button color="primary">Richtig &#10004;</button>
        <button class="volleBreite" *ngIf="element.answer === answer.uebersprungen" mat-raised-button color="accent">Überspringen &#187;</button>
        <button class="volleBreite" *ngIf="element.answer === answer.tabooh" mat-raised-button color="warn">Tabooh &#10008;</button>
        <button class="volleBreite" *ngIf="element.answer === answer.KeineEingabe" mat-raised-button>Keine Eingabe &#10008;</button>
      </mat-cell>
    </ng-container>

    <!-- Solution Column -->
    <ng-container matColumnDef="solution">
      <mat-cell *matCellDef="let element"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
    </ng-container>

    <!-- Tabu1 Column -->
    <ng-container matColumnDef="tabu1">
      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu1}}</a></mat-cell>
    </ng-container>

    <!-- Tabu2 Column -->
    <ng-container matColumnDef="tabu2">
      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu2}}</a></mat-cell>
    </ng-container>

    <!-- Tabu3 Column -->
    <ng-container matColumnDef="tabu3">
      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu3}}</a></mat-cell>
    </ng-container>

    <!-- Tabu4 Column -->
    <ng-container matColumnDef="tabu4">
      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu4}}</a></mat-cell>
    </ng-container>

    <!-- Tabu5 Column -->
    <ng-container matColumnDef="tabu5">
      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu5}}</a></mat-cell>
    </ng-container>

    <!-- Expanded Content Column - The detail row is made up of this one column -->
    <ng-container matColumnDef="expandedDetail" class="volleBreite">
      <mat-cell *matCellDef="let detail" class="expandStyle">
        <!-- Richtig -->
        <button
          mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
          color="primary" class="expandStyle"
          (click)="updateAnswer(detail.element, answer.richtig)"
        >
          Richtig &#10004;
        </button>
        <button
          mat-raised-button
          *ngIf="detail.element.answer === answer.richtig"
          color="primary" class="expandStyle"
        >
          Richtig &#10004;
        </button>
        <!-- Zeit abgelaufen -->
        <button
          mat-stroked-button
          *ngIf="detail.element.answer !== answer.zeitAbgelaufen
        && detail.element.s2cID === lastS2CID"
          class="expandStyle"
          (click)="updateAnswer(detail.element, answer.zeitAbgelaufen)"
        >
          Zeit abgelaufen &#9201;
        </button>
        <button
          mat-raised-button
          *ngIf="detail.element.answer === answer.zeitAbgelaufen
        && detail.element.s2cID === lastS2CID"
          class="expandStyle"
        >
          Zeit abgelaufen &#9201;
        </button>
        <!-- Uebersprungen -->
        <button
          mat-stroked-button
          *ngIf="detail.element.answer !== answer.uebersprungen
        && detail.element.s2cID !== lastS2CID"
          color="accent" class="expandStyle"
          (click)="updateAnswer(detail.element, answer.uebersprungen)"
        >
          Überspringen &#187;
        </button>
        <button
          mat-raised-button
          *ngIf="detail.element.answer === answer.uebersprungen
        && detail.element.s2cID !== lastS2CID"
          color="accent" class="expandStyle"
        >
          Überspringen &#187;
        </button>
        <!-- Tabooh -->
        <button
          mat-stroked-button
          *ngIf="detail.element.answer !== answer.tabooh"
          color="warn" class="expandStyle"
          (click)="updateAnswer(detail.element, answer.tabooh)"
        >
          Tabooh &#10008;
        </button>
        <button
          mat-raised-button
          *ngIf="detail.element.answer === answer.tabooh"
          color="warn" class="expandStyle"
        >
          Tabooh &#10008;
        </button>
      </mat-cell>
    </ng-container>

    <mat-row *matRowDef="let row; columns: displayedColumns;"
             matRipple
             class="{{elementRowStyle}}"
             [class.expanded]="expandedElement == row"
             (click)="expandedElement = row">
    </mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
             [@detailExpand]="canEdit && row.element == expandedElement ? 'expanded' : 'collapsed'"
             style="overflow: hidden">
    </mat-row>
  </mat-table>
</div>