<div class="general-container px-15 fadeIn">
    <div class="centrar">
        <div class="fondo" [style.background-color]="color">
            <p class="content" [style.color]="textColor">{{message}}</p>
        </div>
    </div>

    <div class="content-mitades  justify-between">
        <section class="mitad">
            <header>
                <div class="card-center flex-col items-center">
                    <img class="img" [src]="['assets/img/Usuarios.png']">
                    <span class="card-tittle" [style.color]="color">Usuarios</span>
                </div>
            </header>

            <mat-spinner class="mx-auto" *ngIf="isLoading;" [diameter]="70">
            </mat-spinner>

            <article *ngIf="!isLoading;" class="card-content fadeIn">
                <div class="total-user flex-col items-center">
                    <span class="total-users">Total de Usuarios</span>
                    <span class="number">{{totalUsers}}</span>
                </div>
                <div class="cards flex-row">
                    <div class="card-info flex-col items-center">
                        <div class="img-info-yellow">
                            <span class="text-info">{{teachers}}</span>
                        </div>
                        <span class="text-info-yellow">Profesores</span>
                    </div>
                    <div class="card-info flex-col items-center">
                        <div class="img-info-red">
                            <span class="text-info">{{students}}</span>
                        </div>
                        <span class="text-info-red">Alumnos</span>
                    </div>
                    <div class="card-info flex-col items-center">
                        <div class="img-info-blue">
                            <span class="text-info">{{parents}}</span>
                        </div>
                        <span class="text-info-blue">Padres</span>
                    </div>
                </div>
            </article>
            <footer class="justify-end" *ngIf="!isLoading;">
                <button [style.background-color]="link" class="users-button items-center justify-center"
                    routerLink="/homeAdmin/catalogoUsuarios">
                    <mat-icon class="icon">groups</mat-icon>
                </button>
            </footer>
        </section>

        <section class="mitad">
            <header>
                <div class="title-section">
                    <div class="fondo-medio-inicio cursor-pointer" routerLink="/homeAdmin/calendar"
                        [style.background-color]="link">
                        <p class="semana" (click)="calendarView('timeGridWeek')">Semana {{result}}</p>
                    </div>
                    <div class=" card-center flex-col items-center">
                        <img class="img" [src]="['assets/img/Calendario.png']" alt="">
                        <span class="card-tittle" [style.color]="color">Calendario Escolar</span>
                    </div>
                    <div class="fondo-medio-final cursor-pointer" routerLink="/homeAdmin/calendar"
                        [style.background-color]="link">
                        <p class="semana" (click)="calendarView('dayGridMonth')">{{currentMonth | titlecase}}
                            {{currentYear}}</p>
                    </div>
                </div>
            </header>

            <mat-spinner class="mx-auto" *ngIf="isLoadingEvents;" [diameter]="70">
            </mat-spinner>

            <article class="card-content mx-auto" *ngIf="!isLoadingEvents;">
                <div class="card-day flex-col items-center" *ngFor="let day of weekDays"
                    [ngClass]="{'d-none': day.completeDate !== today}"
                    (click)="calendarView('dayGridDay'); selectedDay(day.completeDate)" routerLink="/homeAdmin/calendar"
                    [style.border]="day.event != 'Sin Evento' ? '1px red solid' : '' ">
                    <span class="num-day">{{day.num}}</span>
                    <span class="day ">{{day.day}}</span>
                    <span class="event mt-10" [ngClass]="{'bold': day.event !== 'Sin Evento'}">
                        {{day.event}}
                    </span>
                </div>
            </article>

            <footer class="justify-end">
                <button [style.background-color]="link" class="calendar-button items-center justify-center"
                    (click)="calendarView('dayGridMonth')" routerLink="/homeAdmin/calendar">
                    <mat-icon class="icon">calendar_month</mat-icon>
                </button>
            </footer>
        </section>
    </div>

    <div class="content-mitades-table  justify-between">
        <section class="mitad-table">
            <div class="table-content">
                <header class="centrar mb-25">
                    <div class="fondo" [style.background-color]="color">
                        <p class="content" [style.color]="textColor">Actividad (24 hrs)</p>
                    </div>
                </header>
                <article class="table-container mat-elevation-z8">
                    <div class="table-responsive">
                        <table mat-table [dataSource]="dataSourceActividad" #tabla1 class="mat-elevation-z8">

                            <ng-container matColumnDef="idUsuario">
                                <th mat-header-cell *matHeaderCellDef> ID Usuario </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.idUsuario}} </td>
                            </ng-container>

                            <ng-container matColumnDef="nombre">
                                <th mat-header-cell *matHeaderCellDef> Nombre </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.nombreCompleto}} </td>
                            </ng-container>

                            <ng-container matColumnDef="rol">
                                <th mat-header-cell *matHeaderCellDef style="text-align: c;"> Rol </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.rol}} </td>
                            </ng-container>

                            <ng-container matColumnDef="horaEntrada">
                                <th mat-header-cell *matHeaderCellDef> Fecha y Hora de Entrada </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaHora| date: 'dd/MM/yyyyhh:mm:ss'}}</td>
                            </ng-container>

                            <ng-container matColumnDef="horaSalida">
                                <th mat-header-cell *matHeaderCellDef> Fecha y Hora de Salida </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaHoraFin| date: 'dd/MM/yyyyhh:mm:ss'}}</td>
                            </ng-container>



                            <ng-container matColumnDef="acciones">
                                <th mat-header-cell *matHeaderCellDef style="text-align: center;">Extra</th>
                                <td mat-cell *matCellDef="let actividad">
                                    <button style="margin-left: auto; margin-right: auto;" class="open-modal"
                                        (click)="openDialog(actividad.idActividad)">
                                        <mat-icon>visibility</mat-icon>
                                    </button>
                                </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="columnasActividades"></tr>
                            <tr mat-row *matRowDef="let row; columns: columnasActividades;"></tr>
                        </table>
                    </div>
                    <mat-paginator #paginador1 [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons
                        class="mat-elevation-z8"></mat-paginator>
                </article>
            </div>
        </section>

        <section class="mitad-table">
            <div class="table-content">
                <header class="centrar mb-25">
                    <div class="fondo" [style.background-color]="color">
                        <p class="content" [style.color]="textColor">Nuevas Circulares</p>
                    </div>
                </header>
                <article class="table-container mat-elevation-z8">
                    <div class="table-responsive">
                        <table mat-table [dataSource]="dataSourceCirculares" class="mat-elevation-z8">

                            <ng-container matColumnDef="titulo">
                                <th mat-header-cell *matHeaderCellDef> Titulo </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.titulo}} </td>
                            </ng-container>

                            <ng-container matColumnDef="receptoresAudiencia">
                                <th mat-header-cell *matHeaderCellDef> Receptores-Audiencia</th>
                                <td mat-cell *matCellDef="let circular"> {{circular.idReceptores}} -
                                    {{circular.audiencia}} </td>
                            </ng-container>

                            <ng-container matColumnDef="importancia">
                                <th mat-header-cell *matHeaderCellDef> Importancia </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.importancia}} </td>
                            </ng-container>

                            <ng-container matColumnDef="fechaPublicacion">
                                <th mat-header-cell *matHeaderCellDef> Fecha de Publicación </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaPublicacion| date:
                                    'dd/MM/yyyy hh:mm:ss'}} </td>
                            </ng-container>

                            <ng-container matColumnDef="fechaCaducidad">
                                <th mat-header-cell *matHeaderCellDef> Fecha de Caducidad </th>
                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaCaducidad| date: 'dd/MM/yyyy
                                    hh:mm:ss'}} </td>
                            </ng-container>


                            <ng-container matColumnDef="visualizar">
                                <th mat-header-cell *matHeaderCellDef style="text-align: center;">Visualizar</th>
                                <td mat-cell *matCellDef="let actividad">
                                    <button style="margin-left: auto; margin-right: auto;" class="open-modal"
                                        (click)="openDialog1(actividad.idCircular)">
                                        <mat-icon>visibility</mat-icon>
                                    </button>
                                </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="columnasCirculares"></tr>
                            <tr mat-row *matRowDef="let row; columns: columnasCirculares;"></tr>
                        </table>
                    </div>
                    <mat-paginator #paginador2 [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons
                        class="mat-elevation-z8"></mat-paginator>
                </article>

            </div>
        </section>
    </div>


</div>
