<div class="main-container animated fadeIn" (window:resize)="onResize($event)">
    <div [class]="card_size">
        <h1 class="title-card">Administración de tareas</h1>

        <app-translation (click)="updatePaginator()"></app-translation>

        <div align="center" class="w-100 mb-10">
            <div style="display: inline-block; width: 80%">
                <!-- PAGINADOR -->
                <mat-form-field appearance="fill">
                    <mat-label>Buscador</mat-label>
                    <input matInput (keyup)="applyFilter($event)" placeholder="Ingrese la palabra a buscar">
                    <mat-icon matSuffix>search</mat-icon>
                </mat-form-field>
            </div>

            <div style="display: inline-block; width: 20%">
                <button mat-stroked-button color="primary" (click)="openDialogTaskForm('Registrar', null)"
                    [disabled]="isLoadingForm" *ngIf="!btnSmall">
                    <mat-icon>add</mat-icon> Registrar
                </button>
                <button mat-mini-fab color="primary" class="no-shadow"
                    (click)="openDialogTaskForm('Registrar', null)" [disabled]="isLoadingForm" *ngIf="btnSmall">
                    <mat-icon>add</mat-icon>
                </button>
            </div>
        </div>

        <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
            <mat-spinner align="center"></mat-spinner>
            <h3>Cargando datos ...</h3>
        </div>

        <!-- ALERTA - CARGANDO FORMULARIOS -->
        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

        <table mat-table [dataSource]="dataSource" class="animated fadeIn" *ngIf="!isLoading">

            <ng-container matColumnDef="name_task">
                <th mat-header-cell *matHeaderCellDef>
                    Tarea
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.name}}
                </td>
            </ng-container>

            <ng-container matColumnDef="module">
                <th mat-header-cell *matHeaderCellDef>
                    Modulo
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.id_module == null ? "Sin modulo" : "Modulo asignado" }}
                </td>
            </ng-container>

            <ng-container matColumnDef="workflow">
                <th mat-header-cell *matHeaderCellDef>
                    Flujo de trabajo
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.workflow == null ? "Sin workflow": element.workflow.name }}
                </td>
            </ng-container>

            <ng-container matColumnDef="isAvailable">
                <th mat-header-cell *matHeaderCellDef>
                    Estatus de la tarea
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.isAvailable == 0 ? "Inhabilitada" : "Habilitada" }}
                </td>
            </ng-container>

            <ng-container matColumnDef="notification">
                <th mat-header-cell *matHeaderCellDef>
                    Notificación
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.employeesValidate.length > 0 ? "Si" : "No" }}
                </td>
            </ng-container>

            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef style="text-align: center">
                    Acciones
                </th>
                <td mat-cell *matCellDef="let element" style="text-align: center">
                    <div *ngIf="btnSmall">
                        <button mat-mini-fab color="accent" [matMenuTriggerFor]="menu" #menuTrigger
                            class="no-shadow">
                            <mat-icon>settings</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                            <button mat-menu-item (click)="openDialogTaskForm('Modificar', element)">
                                <mat-icon>edit</mat-icon>
                                Modificar
                            </button>

                            <button mat-menu-item (click)="disableTask(element.id)"
                                [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == false"
                                *ngIf="element.isAvailable == true">
                                <mat-icon>remove_circle_outline</mat-icon>
                                Inhabilitar tarea
                            </button>

                            <button mat-menu-item (click)="disableTask(element.id)"
                                [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == true"
                                *ngIf="element.isAvailable == false">
                                <mat-icon>published_with_changes</mat-icon>
                                Habilitar tarea
                            </button>
                        </mat-menu>
                    </div>
                    <div *ngIf="!btnSmall">
                        <button mat-mini-fab color="primary" class="button-accion"
                            (click)="openDialogTaskForm('Modificar', element)"
                            matTooltip="{{ 'tooltip.modificar' | translate }}">
                            <mat-icon>edit</mat-icon>
                        </button>
                        <button mat-mini-fab color="warn" class="button-accion" (click)="alert('DT',element)"
                            [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == false"
                            *ngIf="element.isAvailable == true">
                            <mat-icon>remove_circle_outline</mat-icon>
                        </button>
                        <button mat-mini-fab color="success" (click)="alert('DT',element)"
                            [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == true"
                            *ngIf="element.isAvailable == false">
                            <mat-icon>published_with_changes</mat-icon>
                        </button>
                    </div>

                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

            <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell p-80 centre" colspan="12">
                    <img src="../../assets/img/empty_data.svg" width="300">
                    <h2>Sin datos</h2>
                </td>
            </tr>
        </table>
        <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
        </mat-paginator>
    </div>
</div>
