<div class="general-container">
    <div class="centrar">
        <div class="fondo" [style.background-color]="primerColorTitulos ? primerColorTitulos : '#e89a20'">
            <p class="content">{{mensajeBienvenida? mensajeBienvenida : 'Bienvenidos al Ciclo Escolar 2024-2025'}}</p>
        </div>
    </div>

    <div class="content-mitades">
        <div class="mitad mx-auto">
            <div class="-mt-25">
                <div class="card-center flex-col items-center">
                    <img class="img" [src]="['assets/img/Usuarios.png']">
                    <span class="card-tittle"
                        [style.color]="primerColorTitulos ? primerColorTitulos : '#e89a20'">Acciones</span>
                </div>
            </div>

            <div class="card-content">
                <div class="cardMain" *ngFor="let card of cardsMain" (click)="navegar(card.url)">
                    <div class="imgCard-container">
                        <img class="img-cardMain" [src]="card.img">
                    </div>
                    <span class="text-cardMain">{{card.texto}}</span>
                </div>
            </div>
        </div>

        <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">
        <div class="mitad-table">
            <div class="table-content">
                <div class="centrar mb-25">
                    <div class="fondo" [style.background-color]="primerColorTitulos ? primerColorTitulos : '#e89a20'">
                        <p class="content">Circulares</p>
                    </div>
                </div>
                <div 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 circular"> {{circular.titulo}} </td>
                            </ng-container>

                            <ng-container matColumnDef="publicadaPor">
                                <th mat-header-cell *matHeaderCellDef> Publicada Por </th>
                                <td mat-cell *matCellDef="let circular"> {{circular.alias ? circular.alias : circular.publicadaPor}}  </td>
                            </ng-container>

                            <ng-container matColumnDef="estado">
                                <th mat-header-cell *matHeaderCellDef> Estado </th>
                                <td mat-cell *matCellDef="let circular"> {{circular.estado}} </td>
                            </ng-container>

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

                            <ng-container matColumnDef="fechaPublicacion">
                                <th mat-header-cell *matHeaderCellDef> Fecha de Publicación </th>
                                <td mat-cell *matCellDef="let circular"> {{circular.fechaPublicacion}} </td>
                            </ng-container>

                            <ng-container matColumnDef="acciones">
                                <th mat-header-cell *matHeaderCellDef> Acciones </th>
                                <td mat-cell *matCellDef="let circular">
                                    <p class="inline" (click)="openDialog(circular)">

                                        <mat-icon>visibility</mat-icon> {{circular.acciones}}
                                    </p>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="adjuntos">
                                <th mat-header-cell *matHeaderCellDef> Adjuntos </th>
                                <td mat-cell *matCellDef="let circular"> <button *ngIf="circular.jsonAdjuntos.length>0"
                                        mat-button [matMenuTriggerFor]="menuAd"
                                        style="background-color: rgb(184, 221, 247);">Adjuntos <mat-icon
                                            matSuffix>keyboard_arrow_down</mat-icon></button>
                                    <mat-menu #menuAd="matMenu">
                                        <button mat-menu-item *ngFor="let option of circular.jsonAdjuntos"
                                            (click)="buscarArchivo(option.ruta)">
                                            <span style="font-size: 13px;">
                                                {{option.nombre}}
                                            </span>
                                        </button>
                                    </mat-menu>
                                    <span *ngIf="circular.jsonAdjuntos.length==0">No aplica</span>
                                </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>
                </div>

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


</div>