<div>
  <h3>Dostępne lewe strony:</h3>
  <div class="puzzles-container">
    <div class='puzzle' *ngFor="let item of leftSides; let i = index" (click)="leftSideClick(item,i)" [ngClass]="{'active': (selectedLeftSide.leftSideText === item && selectedLeftSide.indexOfLeftSide === i && selectedLeftSide.from === 'leftSides'), 'empty': (item === undefined || item === '')}">
      <span>{{item.left_side}}</span>
    </div>
  </div>
  <h3>Twoja odpowiedź:</h3>
  <div class="puzzles-container">
    <div *ngFor="let item of leftSidesToSend; let i = index" class="both-sides">
      <div class="puzzle good" *ngIf="result[i] && verify">
        <span>{{item.left_side}}
        </span>
      </div>
      <div class="puzzle wrong" *ngIf="!result[i] && verify">
        <span>{{item.left_side}}
        </span>
      </div>
      <div *ngIf="!verify" class='puzzle' (click)="leftSideToSendClick(item,i)" [ngClass]="{'active': (selectedLeftSide.leftSideText === item && selectedLeftSide.indexOfLeftSide === i && selectedLeftSide.from === 'leftSidesToSend')}">
        <span>{{item.left_side}}
        </span>
      </div>
      <div class='puzzle-right'>
        <span>{{rightSides[i].right_side}}</span>
      </div>
    </div>

  </div>
  <br />
  <button *ngIf="!verify" class="button" style="min-width: 200px;" (click)="nextQuestion()"><i class="fas fa-check-circle"></i> Sprawdź</button>
</div>
