<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast">
    <mat-grid-list cols="12" rowHeight="64px" class="card-title">
        <mat-grid-tile colspan="12">
            <mat-card-title>
                Administración de tareas
            </mat-card-title>
        </mat-grid-tile>
        <app-translation (click)="updatePaginator()"></app-translation>

        <!--         <mat-grid-tile colspan="2">
            <a mat-mini-fab style="left: 10%;" class="secondary" matTooltip="{{ 'tooltip.boton.regresar' | translate }}"
                (click)="backToWorkflows()">
                <mat-icon>arrow_back</mat-icon>
            </a>
        </mat-grid-tile> -->

        <mat-grid-tile colspan="8" class="card-title">
            <mat-form-field appearance="legacy" class="searcher">
                <mat-label>{{ 'buscador' | translate }}</mat-label>
                <input matInput placeholder="{{ 'buscador.placeholder' | translate }}" (keyup)="applyFilter($event)" />
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="4">
            <a mat-fab class="secondary" (click)="openDialogTaskForm('Registrar', null)"
                matTooltip="{{ 'tooltip.registrar' | translate}}">
                <mat-icon>add</mat-icon>
            </a>
        </mat-grid-tile>
    </mat-grid-list>
    <!--     <p class="centre display-text text-secondary">Filtros de búsqueda</p>
    <div class="filters mb-5">
        <div class="flex-item">
            <mat-form-field hintLabel="{{ 'workflow.historial.notificaciones.busqueda.fecha' | translate }}"
                appearance="legacy">
                <mat-label>Fecha de creación</mat-label>
                <input [(ngModel)]='filterSendDate' matInput [min]="minDate" [max]="maxDate"
                    [matDatepicker]="date_created">
                <mat-datepicker-toggle matSuffix [for]="date_created"></mat-datepicker-toggle>
                <mat-datepicker #date_created></mat-datepicker>
            </mat-form-field>
        </div>

        <div class="flex-item">
            <mat-form-field hintLabel="{{ 'workflow.modulos.form' | translate }}" appearance="legacy">
                <mat-label>{{ 'workflow.modulos.form.placeholder' | translate }}</mat-label>
                <mat-select [(ngModel)]='filterModule'>
                    <mat-option *ngFor="let item of modules; let i = index" [value]="item.name">
                        {{ item.name }}
                    </mat-option>
                </mat-select>
                <mat-icon matSuffix>view_module</mat-icon>
            </mat-form-field>
        </div>

        <div class="flex-item">
            <button class="mr-1 secondary" mat-mini-fab matTooltip="Aplicar filtros" (click)="filter()">
                <mat-icon>filter_list</mat-icon>
            </button>
            <button class="warn" mat-mini-fab matTooltip="Quitar filtros" (click)="clearFilter()">
                <mat-icon>delete</mat-icon>
            </button>
        </div>
    </div> -->

    <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>

    <div *ngIf="data_empty" class="data-empty">
        {{ 'datos.vacios' | translate }}
    </div>

    <div *ngIf="filter_empty " class="data-empty">
        {{ 'No se encontraron coincidencias' }}
    </div>


    <table mat-table [dataSource]="dataSource" class="animated fadeIn" *ngIf="dataSource.data.length != 0">

        <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 class="centre">Acciones</th>
            <td mat-cell *matCellDef="let element" class="centre table-action">
                <button mat-mini-fab class="mr-1 secondary" (click)="openDialogTaskForm('Modificar', element)"
                    matTooltip="{{ 'tooltip.modificar' | translate }}">
                    <mat-icon>edit</mat-icon>
                </button>
                <button mat-mini-fab color="warn" class="mr-1" (click)="disableTask(element.id)"
                    matTooltip="{{ 'workflow.detalle.tabla.acciones.inhabilitar.tootltip' | translate}}"
                    [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 class="mr-1 ITTEC" (click)="disableTask(element.id)"
                    matTooltip="{{ 'workflow.detalle.tabla.acciones.habilitar.tootltip' | translate}}"
                    [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == true"
                    *ngIf="element.isAvailable == false">
                    <mat-icon>published_with_changes</mat-icon>
                </button>
            </td>

        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
    </mat-paginator>
</mat-card>