<div class="alert-grey">
   Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
   <div class="pytanie">{{question.question}} </div>
   <h3>Dostępne elementy rozsypanki:</h3>
  <div class="puzzles-container">
    <div class='puzzle' *ngFor="let item of puzzles; let i = index" (click)="puzzleClick(item,i)" [ngClass]="{'active': (selectedPuzzle.puzzleText === item && selectedPuzzle.indexOfPuzzle === i && selectedPuzzle.from === 'puzzles'), 'empty': (item === undefined || item === '')}">
      <span>{{item}}</span>
    </div>
  </div>
  <h3>Twoja odpowiedź:</h3>
  <div class="puzzles-container">
    <div class='puzzle' *ngFor="let item of puzzlesToSend; let i = index" (click)="puzzleToSendClick(item,i)" [ngClass]="{'active': (selectedPuzzle.puzzleText === item && selectedPuzzle.indexOfPuzzle === i && selectedPuzzle.from === 'puzzlesToSend')}">
      <span>{{item}}</span>
    </div>
  </div>
  <br />

</div>
 <button class="btn btn-study-cave" (click)="nextQuestion()"><i class="fas fa-arrow-right"></i> Dalej</button>
