<div class="centrar fadeIn">
    <div class="fondo" [style.background-color]="color">
        <p class="content" [style.color]="textColor">Tareas</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-form-field>
        </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="materia">
                    <th mat-header-cell *matHeaderCellDef> Materia</th>
                    <td mat-cell *matCellDef="let tarea"> {{tarea.materia}}</td>
                </ng-container>

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


                <ng-container matColumnDef="tipoTarea">
                    <th mat-header-cell *matHeaderCellDef> Tipo de Tarea </th>
                    <td mat-cell *matCellDef="let tarea"> {{tarea.tipo_tarea}} </td>
                </ng-container>

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

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

                <ng-container matColumnDef="enlaces">
                    <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Vinculos </th>
                    <td mat-cell *matCellDef="let tarea" style="text-align: center;">
                        <button *ngIf="tarea.vinculoTareaArray.length>0" mat-button [matMenuTriggerFor]="menuVin"
                            class="btn-grande" style="background-color: rgb(184, 221, 247);">Vinculos <mat-icon
                                matSuffix>keyboard_arrow_down</mat-icon></button>
                        <button *ngIf="tarea.vinculoTareaArray.length>0" mat-button [matMenuTriggerFor]="menuVin"
                            class="btn-movil">
                            <img src="../../../../../assets/icons/carpeta.png" alt="icono carpeta" width="30"
                                height="30">
                        </button>
                        <span *ngIf="tarea.vinculoTareaArray.length==0">No aplica</span>
                        <mat-menu #menuVin="matMenu">
                            <button mat-menu-item *ngFor="let option of tarea.vinculoTareaArray"
                                (click)="buscarArchivo(option.url)">
                                <span style="font-size: 13px;">
                                    {{ option.nombre }}
                                </span>
                            </button>
                        </mat-menu>
                    </td>
                </ng-container>

                <ng-container matColumnDef="adjuntos">
                    <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Adjuntos </th>
                    <td mat-cell *matCellDef="let tarea" style="text-align: center;">
                        <button *ngIf="tarea.adjuntoTarea.length>0" mat-button [matMenuTriggerFor]="menuAd"
                            class="btn-grande" style="background-color: rgb(184, 221, 247);">Adjuntos <mat-icon
                                matSuffix>keyboard_arrow_down</mat-icon></button>
                        <button *ngIf="tarea.adjuntoTarea.length>0" mat-button [matMenuTriggerFor]="menuAd"
                            class="btn-movil">
                            <img src="../../../../../assets/icons/carpeta.png" alt="icono carpeta" width="30"
                                height="30">
                        </button>
                        <span *ngIf="tarea.adjuntoTarea.length==0">No aplica</span>
                        <mat-menu #menuAd="matMenu">
                            <button mat-menu-item *ngFor="let option of tarea.adjuntoTarea"
                                (click)="buscarArchivo(option.ruta)">
                                <span style="font-size: 13px;">
                                    {{ option.nombre }}
                                </span>
                            </button>
                        </mat-menu>
                    </td>
                </ng-container>

                <ng-container matColumnDef="acciones">
                    <th mat-header-cell *matHeaderCellDef> Acciones</th>
                    <td mat-cell *matCellDef="let tarea">
                        <div class="flex-row items-center">
                            <button mat-menu-item (click)="openDialog(tarea)">
                                <mat-icon>preview</mat-icon>
                                <span>Visualizar</span>
                            </button>
                        </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="7">No hay resultados para "{{input.value}}"</td>
                </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>