<div class="content">
  <div id="container-small">
  <h4>Łączenie fiszek w pary</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>
      </div>
      <div>
        <b>Złych odpowiedzi: </b>
        <span> {{ bad }} na {{ length_test }}</span>
      </div>
    </div>
    <br />
  </div>
</div>
<div id="container-large">
    <div class="test" *ngIf="started">
      <app-flashcards-pairs-test-set (goodEvent)="goodEvent($event)" (isChecked)=isChecked($event)
       [package]="packages" package_id="{{ package_id }}" [id]="id"></app-flashcards-pairs-test-set>
      <br />
      <div>
        <b>Ekran: </b>
        <span> {{ package_id + 1}} z {{ length_packages }}</span>
      </div>
    </div>



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