<ion-content>
    <img class="dotted-bg" src="https://www.searchpng.com/wp-content/uploads/2019/02/Polka-dot-Color-Pattern-PNG-Image.png">

    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>

    <ng-container *ngIf="!showReport">
        <section class="visual-timer">
            <p class="time"> {{ secondsPerQuestion }} </p>
            <ion-icon name="hourglass-outline"></ion-icon>

            <div class="progress" [ngStyle]="{'width.%' : (secondsPerQuestion * 100 / 30)}"></div>
        </section>

        <div class="container">
            <header class="question-counter">
                <h2> Question {{ selectedQuestion + 1 }}/<span>{{ questions.length }}</span> </h2>
            </header>

            <ul class="questions">
                <ng-container *ngFor="let question of questions; let i = index">
                    <ng-container *ngIf="selectedQuestion === i">
                        <li *ngIf="question.type === 'MCQ'">
                            <app-mcq [text]="question.question" 
                            [choices]="question.choices"
                            [correctAnswer]="question.correctAnswer"></app-mcq>
                        </li>
        
                        <li *ngIf="question.type === 'CARD'">
                            <app-swipe-cards (cardEvent)="getCardEvent($event)" [questions]="question.question"></app-swipe-cards>
                        </li>
                    </ng-container>
                </ng-container>                        
            </ul>
            
        </div>


        <button class="next-button" *ngIf="questionType === 'MCQ'" (click)="nextQuestion()">
            <span class="text"> Next </span>

            <span class="dot"></span>
        </button>
    </ng-container>

    <ng-container *ngIf="showReport">
        <section class="report-card">
            <div>
                <h2> Yay! </h2>
                <p>
                    You've completed all the fan Quiz questions!
                </p>
            </div>
        </section>


        <button class="next-button" (click)="back()">
            <span class="text"> Back </span>

            <span class="dot"></span>
        </button>
    </ng-container>
</ion-content>
