<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast ">
    <mat-grid-list cols="12" rowHeight="70px" class="card-title">
        <mat-grid-tile colspan="12">
            <mat-card-title>{{ workflowObject.name}}</mat-card-title>
        </mat-grid-tile>
        <mat-grid-tile colspan="2">
            <a mat-mini-fab style="left: 5%;" class="secondary" (click)="backToWorkflows()"
                matTooltip="{{ 'tooltip.boton.regresar' | translate }}">
                <mat-icon>arrow_back</mat-icon>
            </a>
        </mat-grid-tile>

        <mat-grid-tile colspan="6" 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" class="card-title">
            <a mat-fab class="secondary m-2" (click)="openDialogTaskForm('Registrar', null)"
                matTooltip="{{ 'tooltip.registrar' | translate}}">
                <mat-icon>add</mat-icon>
            </a>
            <a mat-fab class="secondary " matTooltip="{{ 'workflow.detalle.diagrama.tooltip' | translate }}"
                (click)="showDiagram()">
                <mat-icon>schema</mat-icon>
            </a>
        </mat-grid-tile>
    </mat-grid-list>

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

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

        <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">
            <th mat-header-cell *matHeaderCellDef class="">{{ 'workflow.detalle.tabla.estatus' | translate }}</th>
            <td mat-cell *matCellDef="let element">
                {{ element.isAvailable == true ? 'Activo' : 'Inactivo' }} {{ element.nextSequence }}
            </td>
        </ng-container>

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

        <ng-container matColumnDef="notification">
            <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.name }}  -->
            </td>
        </ng-container>

        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef class="">{{ 'workflow.detalle.tabla.acciones' | translate }}</th>
            <td mat-cell *matCellDef="let element; let i = index" class="table-action ">

                <button mat-mini-fab
                    [disabled]="element.employeesValidate.length <= 0 && element.employeesNotify.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 class="mr-1 secondary" matTooltip="{{ 'tooltip.modificar' | translate}}"
                    (click)="openDialogTaskForm('Modificar', element)"
                    [disabled]="element.sequence == 1 || element.sequence == 1000">
                    <mat-icon>edit</mat-icon>
                </button>

                <button mat-mini-fab color="warn" class="mr-1" (click)="disableTask(element.sequence)"
                    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.sequence)"
                    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>

                <button mat-mini-fab color="warn" class="mr-1"
                    matTooltip="{{ 'workflow.detalle.tabla.acciones.eliminar.tootltip' | translate }}"
                    [disabled]="element.sequence == 1 || element.sequence == 1000" (click)="deleteTask(element, i)">
                    <mat-icon>delete</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, 50, 100]" showFirstLastButtons aria-label="Seleccione">
    </mat-paginator>
</mat-card>