<div class="main-container animated fadeIn" (window:resize)="onResize($event)">
    <div [class]="card_size">
        <h1 class="title-card">{{ workflowObject.name }}</h1>

        <!-- BUSCADOR Y BOTÓN DE REGISTRP -->
        <div align="center" class="w-100 mb-10">
            <div style=" width: 100%">
                <!-- PAGINADOR -->
                <mat-form-field  style="margin-right: 6px;">
                    <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>

                <button mat-stroked-button color="primary" (click)="openDialogsByType('Registrar', null)"
                    [disabled]="isLoadingForm" *ngIf="!btnSmall">
                    <mat-icon>add</mat-icon> Registrar
                </button>

                <button mat-mini-fab color="primary" style="margin-right: 4px;"
                    (click)="openDialogsByType('Registrar', null)" [disabled]="isLoadingForm" *ngIf="btnSmall"
                    matTooltip="Registrar" class="button-accion">
                    <mat-icon>add</mat-icon>
                </button>

                <button mat-stroked-button color="primary" (click)="showDiagram()" [disabled]="isLoadingForm"
                    *ngIf="!btnSmall && workflowObject.isForm == false" class="button-accion">
                    <mat-icon>schema</mat-icon> Diagrama
                </button>

                <button mat-mini-fab color="primary" class="no-shadow" (click)="showDiagram()"
                    [disabled]="isLoadingForm" *ngIf="btnSmall && workflowObject.isForm == false"
                    matTooltip="Ver diagrama">
                    <mat-icon>schema</mat-icon>
                </button>
            </div>
            <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

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

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

                <ng-container matColumnDef="sequence">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.secuencia' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.sequence }}
                    </td>
                </ng-container>

                <ng-container matColumnDef="estatus" *ngIf="workflowObject.isForm == false">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.estatus' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.isAvailable == true ? 'Activo' : 'Inactivo' }}
                    </td>
                </ng-container>

                <ng-container matColumnDef="estatus" *ngIf="workflowObject.isForm == true">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.estatus' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.required == true ? 'Campo requerido' : 'Campo opcional' }}
                    </td>
                </ng-container>

                <ng-container matColumnDef="process" *ngIf="workflowObject.isForm != true">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.tareas' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.name }}
                        <!-- {{element.nextSequence}} -->
                    </td>
                </ng-container>

                <ng-container matColumnDef="process" *ngIf="workflowObject.isForm == true">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.campos' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.name }}
                    </td>
                </ng-container>

                <ng-container matColumnDef="notification" *ngIf="workflowObject.isForm == false">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.notificar' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.employeesValidate.length > 0 ? "Si" : "No" }}
                        <!-- {{element.changeSequence}} -->
                    </td>
                </ng-container>

                <ng-container matColumnDef="notification" *ngIf="workflowObject.isForm == true">
                    <th mat-header-cell *matHeaderCellDef class="">
                        {{ 'workflow.detalle.tabla.notificar' | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.isNotified == true ? "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; let i = index" 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 [disabled]="element.employeesValidate.length <= 0"
                                    (click)="openDialogUsers(element)" class="info mr-1">
                                    <mat-icon>group</mat-icon> Ver usuarios
                                </button>

                                <button mat-menu-item (click)="openDialogsByType('Modificar', element)"
                                    [disabled]="element.sequence == 1 || element.sequence == 1000"
                                    *ngIf="workflowObject.isForm == false">
                                    <mat-icon>edit</mat-icon> Modificar
                                </button>

                                <button mat-menu-item (click)="openDialogsByType('Modificar', element)"
                                    *ngIf="workflowObject.isForm == true">
                                    <mat-icon>edit</mat-icon> Modificar
                                </button>

                                <button mat-menu-item (click)=" alert('DT',element, 0)"
                                    [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == false"
                                    *ngIf="element.isAvailable == true && workflowObject.isForm == false">
                                    <mat-icon>remove_circle_outline</mat-icon>
                                    Inhabilitar tarea
                                </button>

                                <button mat-menu-item (click)=" alert('DT',element, 0)"
                                    [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == true"
                                    *ngIf="element.isAvailable == false && workflowObject.isForm == false">
                                    <mat-icon>published_with_changes</mat-icon>
                                    Habilitar tarea
                                </button>

                                <button mat-menu-item
                                    [disabled]="element.sequence == 1 || element.sequence == 1000 && workflowObject.isForm == false "
                                    (click)="alert('ELT',element, i)">
                                    <mat-icon>delete</mat-icon>
                                    Eliminar
                                </button>

                            </mat-menu>
                        </div>
                        <div *ngIf="!btnSmall">
                            <button mat-mini-fab [disabled]="element.employeesValidate.length <= 0"
                                (click)="openDialogUsers(element)" class="info mr-1"
                                matTooltip="{{ 'workflow.detalle.tabla.acciones.usuarios.tootltip' | translate}}">
                                <mat-icon>group</mat-icon>
                            </button>

                            <button mat-mini-fab color="primary" class="button-accion"
                                (click)="openDialogsByType('Modificar', element)" *ngIf="workflowObject.isForm == true">
                                <mat-icon>edit</mat-icon>
                            </button>

                            <button mat-mini-fab color="primary" class="button-accion"
                                (click)="openDialogsByType('Modificar', element)"
                                [disabled]="element.sequence == 1 || element.sequence == 1000"
                                *ngIf="workflowObject.isForm == false">
                                <mat-icon>edit</mat-icon>
                            </button>

                            <button mat-mini-fab color="warn" class="button-accion" matTooltip="Eliminar"
                                [disabled]="element.sequence == 1 || element.sequence == 1000"
                                *ngIf="workflowObject.isForm == false" (click)="alert('ELT',element, i)">
                                <mat-icon>delete</mat-icon>
                            </button>

                            <button mat-mini-fab color="warn" class="button-accion" (click)=" alert('DT',element, 0)"
                                matTooltip="{{ 'workflow.detalle.tabla.acciones.inhabilitar.tootltip' | translate}}"
                                [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == false"
                                *ngIf="element.isAvailable == true && workflowObject.isForm == false">
                                <mat-icon>remove_circle_outline</mat-icon>
                            </button>

                            <button mat-mini-fab color="success" class="button-accion" (click)=" alert('DT',element, 0)"
                                matTooltip="{{ 'workflow.detalle.tabla.acciones.habilitar.tootltip' | translate}}"
                                [disabled]="element.sequence == 1 || element.sequence == 1000 || element.isAvailable == true"
                                *ngIf="element.isAvailable == false && workflowObject.isForm == 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, 50, 100]" showFirstLastButtons aria-label="Seleccione">
            </mat-paginator>
        </div>
    </div>
