<div class="wrapper">
    <div class="content">
        <div class="button-container">
            <button class="button" (click)="goBack()"><i class="fas fa-arrow-left"></i> POWRÓT</button>
            <button class="button" (click)="showTestTypeMenu()"><i class="fas fa-pencil-ruler"></i> GENERUJ TESTY</button>
            <button *ngIf="owned && set && set.permission !== 'GROUP'" class="button" (click)="navigateToEditMode()"><i class="fas fa-edit"></i> EDYTUJ FISZKI</button>
            <button *ngIf="owned && set && set.permission !== 'GROUP'" class="button" (click)="showPopup()"><i class="fas fa-trash-alt"></i> USUŃ FISZKI</button>
            <div *ngIf="user && owned && set && set.permission !== 'GROUP'">
                <button class="button" (click)="changePermission()"><i class="fas fa-unlock"></i> ZMIEŃ UPRAWNIENIA</button>
            </div>
        </div>

        <app-flashcards-test-type-menu [id]="id" (cancel)="handleCancelFlashcardsTestyTypeMenu($event)" *ngIf="testTypeMenu"></app-flashcards-test-type-menu>
        <br />
        <div *ngIf="set">
                <h2>{{set.name}}</h2>
                <table class="table">
                    <thead>
                        <th>
                            Lewa strona
                        </th>
                        <th>
                            Prawa strona
                        </th>
                    </thead>
                    <tbody>
                        <tr *ngFor="let flashcard of set.flashcards; let i = index">
                            <td class="puzzle">{{flashcard.left_side}}</td>
                            <td class="puzzle-right">{{flashcard.right_side}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <app-comments [what]="'flashcardsets'"></app-comments>

    </div>

    <p-dialog header="Potwierdź" [(visible)]="display">
        Czy chcesz usunąć fiszkę?
        <p-footer>
            <button type="button" class="button" pButton icon="pi pi-check" (click)="deleteSet()" label="TAK"></button>
            <button type="button" class="button" pButton icon="pi pi-close" (click)="display=false" label="NIE" class="ui-button-secondary"></button>
        </p-footer>
    </p-dialog>
</div>
