<div class="content">
<div id="container-small">
  <h4>Uzupełnianie fiszek</h4>
  <br />
  <div>
    <b>Nazwa zestawu: </b>
    <i>{{ name }}</i>
    <br />
    <b>Kategoria: </b>
    <i>{{ category }}</i>
  </div>
  <div *ngIf="started">
    <div>
      <div>
        <b>Uzupełniono: </b>
        <span> {{ filled }} z {{ length_test }} fiszek</span>
      </div>
      <div>
        <b>Poprawnych odpowiedzi: </b>
        <span> {{ good }} na {{ length_test }}</span><br />
        <b>Złych odpowiedzi: </b>
        <span> {{ bad }} na {{ length_test }}</span>
      </div>
    </div>
  </div>
</div>
<div id="container-large">
    <div *ngIf="started">
    <div *ngIf="this.filled >= 1 && !finish">

      Poprzednia odpowiedź:<br />
      {{flashcards[index-1].content}} {{allAnswers[index-1].answer}}
    </div>
    <div *ngIf="this.filled < this.length_test && !finish ">
      Podaj odpowiedź:<br />
      {{flashcards[index].content}}
      <input appAutofocus [(ngModel)]="answer" class="mr-2" placeholder="odpowiedź" (keyup.enter)="verifyAnswer()" >
      <button class="button" style="min-width: 200px;" (click)="verifyAnswer()"><i class="fas fa-check-circle"></i> Sprawdź</button>
    </div>
    <div *ngIf="this.is_correct === true && !finish">ODPOWIEDŹ POPRAWNA</div>
    <div *ngIf="this.is_correct === false && !finish">ODPOWIEDŹ NIEPOPRAWNA</div>
    <div *ngIf="this.filled < this.length_test-1 && !finish">
      Następne pytanie:<br />
      {{flashcards[index+1].content}}
    </div>
  </div>


  <div *ngIf="finish">
    <app-test-results [result]="good" [maxPts]="length_test"></app-test-results>
  </div>
  <div *ngIf="!finish">
    <button class="button" *ngIf="!started" (click)="start()"><i class="far fa-play-circle"></i> Rozpocznij test</button>
  </div>
  <button class="button" *ngIf="finish" routerLink="/flashcards/sets/{{ id }}"><i class="far fa-stop-circle"></i> Zakończ test</button>
  <button class="button" *ngIf="started && !finish && !not_last"(click)="finished()"><i class="fas fa-arrow-left"></i> Przejdź do wyniku</button>
  <br />
  <button class="button" routerLink="/flashcards/sets/{{ id }}"><i class="fas fa-arrow-left"></i> Wróć do zestawu</button>
</div>
