<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast ">
    <mat-grid-list cols="12" rowHeight="75px" class="card-title">
        <mat-grid-tile colspan="12">
            <mat-card-title>{{ 'titulo.workflow' | translate }}</mat-card-title>
        </mat-grid-tile>
        <app-translation (click)="updatePaginator()"></app-translation>
        <mat-grid-tile colspan="9" 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="3" class="card-title">
            <a mat-fab class="secondary" matTooltip="Registrar Nuevo" (click)="openDialogFormWorkflows('Registrar')">
                <mat-icon>add</mat-icon>
            </a>
        </mat-grid-tile>
    </mat-grid-list>
    <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>

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

    <div class="row">

        <mat-card class="example-card " *ngFor="let item of obs | async; let i = index;  ">
            <mat-card-title-group>
                <mat-card-title> {{ item.name }} </mat-card-title>
                <button mat-icon-button [matMenuTriggerFor]="menu" class="opcionesMenu">
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="detailWorkflow(item)">
                        <mat-icon>schema</mat-icon>
                        <span>Detalle workflow</span>
                    </button>

                    <button mat-menu-item [matMenuTriggerFor]="historiales">
                        <mat-icon>history</mat-icon>
                        <span>Historiales</span>
                    </button>

                    <mat-menu #historiales="matMenu">
                        <button mat-menu-item (click)="versionsHistory(item)">
                            <mat-icon>watch_later</mat-icon>
                            <span>Historial de versiones</span>
                        </button>
                    </mat-menu>

                    <button mat-menu-item (click)="openDialogFormWorkflows('Modificar',item)">
                        <mat-icon>edit</mat-icon>
                        <span>Modificar workflow</span>
                    </button>

                    <button mat-menu-item *ngIf="item.isAvailable" (click)="updateStateWorkflow(item)">
                        <mat-icon>highlight_off</mat-icon>
                        <span>{{ 'workflow.detalle.cambio.inactivo.tooltip' | translate }}</span>
                    </button>

                    <button mat-menu-item *ngIf="!item.isAvailable" (click)="updateStateWorkflow(item)">
                        <mat-icon>check_circle_outline</mat-icon>
                        <span>{{ 'workflow.detalle.cambio.activo.tooltip' | translate }}</span>
                    </button>

                    <button mat-menu-item *ngIf="!item.isAutomatic" (click)="updateTypeWorkflow(item)">
                        <mat-icon>check_circle_outline</mat-icon>
                        <span>Cambiar a Workflow Automatico</span>
                    </button>

                    <button mat-menu-item *ngIf="item.isAutomatic" (click)="updateTypeWorkflow(item)">
                        <mat-icon>check_circle_outline</mat-icon>
                        <span>Cambiar a Workflow Manual</span>
                    </button>
                </mat-menu>
            </mat-card-title-group>
            <mat-card-subtitle>
                {{ item.created_at }} - {{ item.isAutomatic == 1 ? "Workflow Automático" : "Workflow Manual" }}
            </mat-card-subtitle>
            <mat-card-content>
                {{ item.description}}
            </mat-card-content>
        </mat-card>
    </div>
    <mat-paginator [pageSizeOptions]="[6, 12, 18]" showFirstLastButtons aria-label="Seleccione">
    </mat-paginator>
</mat-card>