<div class="centrar fadeIn">
    <div class="fondo" [style.background-color]="color">
        <p class="content" [style.color]="textColor">Circulares</p>
    </div>
</div>

<div class="container-col fadeIn">
    <div class="flex-row container-search">
        <div class="">
            <mat-form-field class="input">
                <input class="input" (keyup)="applyFilter($event)" matInput placeholder="Buscar" #input>
                <mat-icon matSuffix>search</mat-icon>
                <!-- <mat-hint>Hint</mat-hint> -->
            </mat-form-field>
        </div>
        <div class="buttons">
            <div class="flex-row items-center">
                <mat-form-field style="width: 75%; margin-left: 20px; margin-right: 20px; margin-top: 5px;">
                    <mat-label>Mostrar:</mat-label>
                    <mat-select value="Activos" (selectionChange)="option($event.value)">
                        <mat-option value="Activos">Activos</mat-option>
                        <mat-option value="Todo">Todos los registros</mat-option>
                    </mat-select>
                </mat-form-field>
                <app-button-dialog [vista]="'circulares'"></app-button-dialog>
            </div>
            <button mat-button type="button" class="green" [matMenuTriggerFor]="menu">Exportar a Excel<mat-icon
                    svgIcon="excel" class="icono-blanco"></mat-icon></button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="exportAsExcel()">Exportar esta Página</button>
                <button mat-menu-item (click)="exportAll()">Exportar Todo</button>
            </mat-menu>
        </div>
    </div>
    <div class="table-container mat-elevation-z8">
        <div class="table-responsive " #TABLE>
            <table mat-table [dataSource]="dataSource" #table class="mat-elevation-z8">

                <!-- <ng-container matColumnDef="check">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox class="example-margin" [checked]="allComplete" [color]="task.color"
                            [indeterminate]="someComplete()" (change)="setAll($event.checked)">
                        </mat-checkbox>
                    </th>
                    @for (subtask of task.subtasks; track subtask) {
                    <td mat-cell *matCellDef="let circular">
                        <mat-checkbox [(ngModel)]="circular.completed" [color]="subtask.color"
                            (ngModelChange)="updateAllComplete()">
                        </mat-checkbox>
                    </td>
                    }
                </ng-container> -->



                <ng-container matColumnDef="titulo">
                    <th mat-header-cell *matHeaderCellDef> Título </th>
                    <td mat-cell *matCellDef="let circular"> {{circular.titulo}} </td>
                </ng-container>

                <ng-container matColumnDef="estado">
                    <th mat-header-cell *matHeaderCellDef> Estado</th>
                    <td mat-cell *matCellDef="let circular">
                        <span
                            [ngClass]="{'badge-active': circular.estado == 'Activo' , 'badge-inactive' : circular.estado == 'Eliminado'}">
                            {{circular.estado === 'Eliminado' ? 'Deshabilitado' : 'Activo'}}
                        </span>
                    </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 circular"> {{circular.importancia}} </td>
                </ng-container>

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

                <ng-container matColumnDef="fechaCad">
                    <th mat-header-cell *matHeaderCellDef> Fecha de Caducidad </th>
                    <td mat-cell *matCellDef="let circular"> {{circular.fechaCaducidad}} </td>
                </ng-container>

                <ng-container matColumnDef="adjuntos">
                    <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Adjuntos </th>
                    <td mat-cell *matCellDef="let circular" style="text-align: center;">
                        <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.id, option.nombre)">
                                <span style="font-size: 13px;">
                                    {{option.nombre}}
                                </span>
                            </button>
                        </mat-menu>
                        <span *ngIf="circular.jsonAdjuntos.length==0">No aplica</span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="acciones">
                    <th mat-header-cell *matHeaderCellDef> Acciones</th>
                    <td mat-cell *matCellDef="let circular">
                        <div class="flex-row items-center">
                            <button mat-button [matMenuTriggerFor]="menu"
                                style="background-color: rgb(184, 221, 247);">Acciones <mat-icon
                                    matSuffix>keyboard_arrow_down</mat-icon></button>
                            <mat-menu #menu="matMenu">
                                <button mat-menu-item (click)="openDialogEdit(circular.idCircular)">
                                    <mat-icon>edit</mat-icon>
                                    <span>Editar</span>
                                </button>
                                <button mat-menu-item (click)="circular.estado === 'Activo' ? 
                                deleteCircular(circular.idCircular): enableCircular(circular.idCircular)">
                                    <mat-icon>{{circular.estado==='Activo'? 'delete': 'check'}}</mat-icon>
                                    <span>{{circular.estado==='Activo'? 'Eliminar': 'Activar'}}</span>
                                </button>
                                <button mat-menu-item (click)="openDialog1(circular.idCircular)">
                                    <mat-icon>preview</mat-icon>
                                    <span>Visualizar</span>
                                </button>
                                <button mat-menu-item>
                                    <mat-icon>query_stats</mat-icon>
                                    <span>Estadísticas</span>
                                </button>
                                <button mat-menu-item (click)="openDialog2(circular.idCircular)">
                                    <mat-icon>more_vert</mat-icon>
                                    <span>Más información</span>
                                </button>
                            </mat-menu>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="columnas"></tr>
                <tr mat-row *matRowDef="let row; columns: columnas;"></tr>
                <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell" colspan="4">No hay resultados para "{{input.value}}"</td>
                </tr>
            </table>
            <!-- <mat-spinner></mat-spinner> -->

            <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
        </div>
        <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons class="mat-elevation-z8"></mat-paginator>
    </div>
</div>