<div class="centrar fadeIn">
    <div style="display: flex; justify-content: center; width: 100%; align-items: center;">
        <mat-spinner [diameter]="60" *ngIf="isLoading"></mat-spinner>
    </div>
    <div class="fondo" [style.background-color]="color" *ngIf="!isLoading">
        <p class="content" [style.color]="textColor">Circulares - {{this.dataAlum[0].nombreUsuario}}</p>
    </div>
</div>

<div class="container-col fadeIn" style="margin-top: 10px;">
    <div class="flex-row container-search">
        <div class="contenedor-inputCard">
            <mat-form-field class="input">
                <input class="input" (keyup)="applyFilter($event)" matInput placeholder="Buscar" #input>
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
        </div>
    </div>
    <div class="table-container mat-elevation-z8">
        <div class="table-responsive">
            <table mat-table [dataSource]="dataSource">

                <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="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 style="text-align: center;"> Acciones </th>
                    <td mat-cell *matCellDef="let circular" style="text-align: center;">
                        <mat-icon (click)="openDialog(circular)" style="cursor: pointer;">visibility</mat-icon>
                    </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.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>

                <tr mat-header-row *matHeaderRowDef="columnas"></tr>
                <tr mat-row *matRowDef="let row; columns: columnas;"></tr>
            </table>
            <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>
