<div class="container">
  <div class="content">
    <div id="container-small">
      <h4>Memory</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 {{ flashcards }} fiszek</span>
          </div>
          <div>
            <b>Poprawnych odpowiedzi: </b>
            <span> {{ good }} na {{ flashcards }}</span>
          </div>
        </div>
      </div>
    </div>
    <div id="container-large">
      <div class="test" *ngIf="started">
        <app-flashcards-memory-test-set (goodEvent)="goodEvent($event)" (isChecked)=isChecked($event)
        [package]="packages" package_id="{{ package_id }}" [id]="id"></app-flashcards-memory-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]="flashcards"></app-test-results>
      </div>
      <br />
      <div *ngIf="!finish">
        <button class="btn btn-study-cave" *ngIf="!started" (click)="start()"><i class="far fa-play-circle"></i> Rozpocznij test</button>
        <button class="btn btn-study-cave" *ngIf="checked && not_last" (click)="increment()"><i class="fas fa-arrow-right"></i>Przejdź dalej</button>
        <button class="btn btn-study-cave" *ngIf="checked && !not_last" (click)="increment()"><i class="far fa-stop-circle"></i> Zakończ test</button>
      </div>
      <br />
      <button class="btn btn-study-cave" routerLink="/flashcards/sets/{{ id }}"><i class="fas fa-arrow-left"></i> Wróć do zestawu</button>
    </div>
  </div>  
</div>
