<div class="d-flex">
    <div class="flex-fill">
        <h1 class="mb-1">
            {{ title }}
            <span class="ms-2 text-muted fs-4">{{ questionsCount }} {{ questionsCount > 1 ? 'questions' : 'question' }}</span>
        </h1>
        <span class="me-2 fs-6">{{ subtitle }}</span>
    </div>
    <span class="flex-spacer"></span>
    <div class="align-self-center me-2">
        <button mat-icon-button [matMenuTriggerFor]="menuAeronef" aria-label="Menu Aeronef">
            <mat-icon fontIcon="more_vert"></mat-icon>
        </button>
        <mat-menu #menuAeronef="matMenu">
            @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
            <button mat-menu-item>
                <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                <span>{{ menuitem.name }}</span>
            </button>
            }
        </mat-menu>
    </div>
</div>
<mat-divider class="my-3"></mat-divider>
<app-list-errors [errors]="errors"></app-list-errors>
@if (questions.controls.length) {
    <mat-card [hidden]="!questions.controls.length">
        <div class="mx-3 my-5">
            <mat-progress-bar [mode]="loading ? 'query' : 'determinate'" [value]="loading ? 0 : (totalAnswer/questionsCount*100)" color="accent"></mat-progress-bar>
            <mat-progress-bar class="mt-0" [mode]="loading ? 'query' : 'determinate'" [value]="loading ? 0 : ((timeProgress/timeMax)*100)" [color]="timeProgressColor"></mat-progress-bar>
            <ol class="squareItems clearfix">
                @for (answer of answers; track $index) {
                    <li [class]="answer">{{ ($index + 1) }}</li>
                }
            </ol>
        </div>
        <mat-card-content>
            <form [formGroup]="qcmForm" (ngSubmit)="onSubmit()">
            @for (category of qcm.categories; track category; let index = $index) {
            <mat-accordion>
                <mat-expansion-panel class="mb-3" [expanded]="expandedIndex === index" (opened)="setExpandedIndex(index)">
                    <mat-expansion-panel-header>
                        <mat-panel-title class="fs-4 d-flex align-items-center justify-content-between">
                            <span><span class="text-navy-light">{{ category.num }} - </span>{{ category.name }}</span>
                        </mat-panel-title>
                        <mat-panel-description>
                            {{ category.questions.length }} {{ category.questions.length > 1 ? 'questions' : 'question' }}
                            - 0 réponse
                        </mat-panel-description>
                    </mat-expansion-panel-header>
                    <div class="mb-3 ms-4" formArrayName="questions">
                        @for (question of category.questions; track question; let index = $index) {
                        <div class="mb-3" [formGroupName]="index">
                            <label class="fs-5 fw-medium mb-2" for="radio-group-{{ category.num }}-{{ question.num }}">{{ question.num }} - {{ question.libelle }}</label>
                            <mat-radio-group formControlName="choice" id="radio-group-{{ category.num }}-{{ question.num }}" class="d-flex flex-column" (change)="onChange(category, question, $event.value)">
                            @for (choice of question.choices; track choice) {
                                <mat-radio-button [value]="choice.index" [color]="choice.correct ? 'primary' : 'warn'">{{ choice.libelle }}</mat-radio-button>
                            }
                            </mat-radio-group>
                        </div>
                        }
                    </div>
                </mat-expansion-panel>
            </mat-accordion>
            }
            </form>
        </mat-card-content>
        <!--
        <form [formGroup]="qcmForm">
            <div class="mb-3 ms-4" formArrayName="questions">
                @for (question of questions.controls; track question; let index = $index) {
                <div class="mb-3" [formGroupName]="index">
                    <label class="fs-5 fw-medium mb-2" for="radio-group-{{ index }}">{{ index }} - Libellé</label>
                    <input formControlName="choice" type="text"/>
                </div>
                }
            </div>
        </form>
        -->
    </mat-card>
}
