<div class="close">
    <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>

<span class="center">{{data.act === 'edit'? 'Editar Lista':'Guardar Lista'}}</span>
<!-- --------------------------------------------------------------------------------- -->
<!-- form -->
<mat-spinner class="mx-auto" [diameter]="60" *ngIf="isLoading"></mat-spinner>
<mat-dialog-content class="mat-typography space mt-40" style="min-width: 550px;" [autofocus]="['none']">
    <!-- <mat-spinner *ngIf="isLoading" class="mx-auto" [diameter]="60"></mat-spinner> -->
    <div (ngSubmit)="updateLista()" [formGroup]="form" *ngIf="!isLoading">
        <mat-form-field>
            <mat-label>Mostrar:</mat-label>
            <mat-select formControlName="estado" value="Borradores">
                <mat-option value="Borrador">Borrador</mat-option>
                <mat-option value="Completa">Completa</mat-option>
            </mat-select>
        </mat-form-field>
        <table class="modalTable">
            <tr class="modalTr">
                <th style="min-width: 100px;">Nombre del Alumno</th>
                <th style="min-width: 100px;">Asistencia</th>
                <th style="min-width: 100px;">Falta</th>
                <th style="min-width: 100px;">F.Justificada</th>
                <th style="min-width: 100px;">Comentarios</th>
            </tr>
            <tr class="modalTr" *ngFor="let alumno of dataUsuarios; let i = index">
                <td>{{alumno.nombreAlumno}}</td>
                <td class="modalTd">
                    <mat-checkbox [(ngModel)]="alumno.asistencia" [ngModelOptions]="{standalone: true}"
                        (change)="onCheckboxChange(i, 'asistencia')"></mat-checkbox>
                </td>
                <td class="modalTd">
                    <mat-checkbox [(ngModel)]="alumno.falta" [ngModelOptions]="{standalone: true}"
                        (change)="onCheckboxChange(i, 'falta')"></mat-checkbox>
                </td>
                <td class="modalTd">
                    <mat-checkbox [(ngModel)]="alumno.fJustificada" [ngModelOptions]="{standalone: true}"
                        (change)="onCheckboxChange(i, 'fJustificada')"></mat-checkbox>
                </td>
                <td class="modalTd">
                    <input class="input-b" type="text" [(ngModel)]="alumno.comentario" [ngModelOptions]="{standalone: true}" placeholder="Comentario...">
                  </td>
            </tr>
        </table>
    </div>
</mat-dialog-content>

<div class="items-centerbtn2 justify-center" *ngIf="!isLoading">
    <button type="button" (click)="updateLista()" class="yellow">
        <span>
            Ingresar
        </span>
        <mat-icon class="icon" matSuffix>description</mat-icon>
    </button>
</div>

<!-- Cómo puedo guardar esto en formato JSON por ejemplo {
    AD0017: {
        A: (Aquí puede ser A, F, FJ),
        C: (Comentario)
    },
    AD0018: {
        A: (Aquí puede ser A, F, FJ),
        C: (Comentario)
    }
} -->

<!-- <div class="align flex-row mt-20 pb-10" *ngIf="!isLoading">
    <div class="items-center justify-center">
        <button class="orange" (click)="limpiar()">
            <span>
                Limpiar
            </span>
            <mat-icon class="icon" matSuffix>delete</mat-icon></button>
    </div>
    <div class="items-center justify-center">
        <button class="red" mat-dialog-close>
            <span>
                Cerrar
            </span>
            <mat-icon class="icon" matSuffix>cancel</mat-icon></button>
    </div>

</div> -->

<!-- -------------------------------------- -->
