<div class="main-container animated fadeIn" (window:resize)="onResize($event)">
    <div [class]="card_size">
        <h1 class="title-card">{{ 'titulo.workflow' | translate }}</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  class="input-filter">
                    <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)="openDialogFormWorkflows('Registrar')"
                    [disabled]="isLoadingForm" *ngIf="!btnSmall">
                    <mat-icon>add</mat-icon> Registrar
                </button>
                <button mat-mini-fab color="primary" class="no-shadow" (click)="openDialogFormWorkflows('Registrar')"
                    [disabled]="isLoadingForm" *ngIf="btnSmall" matTooltip="Registrar Nuevo">
                    <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>

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

        <mat-grid-list cols="3" rowHeight="160px" *ngIf="(obs | async)?.length>0">
            <mat-grid-tile colspan="1" *ngFor="let item of obs | async; let i = index;  ">
                <mat-card class="example-card ">
                    <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)="alert('UPSW',item)">
                                <mat-icon>highlight_off</mat-icon>
                                <span>{{ 'workflow.detalle.cambio.inactivo.tooltip' | translate }}</span>
                            </button>

                            <button mat-menu-item *ngIf="!item.isAvailable" (click)="alert('UPSW',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)="alert('UTW',item)">
                                <mat-icon>check_circle_outline</mat-icon>
                                <span>Cambiar a Workflow Automatico</span>
                            </button>

                            <button mat-menu-item *ngIf="item.isAutomatic" (click)="alert('UTW',item)">
                                <mat-icon>check_circle_outline</mat-icon>
                                <span>Cambiar a Workflow Manual</span>
                            </button>
                        </mat-menu>
                    </mat-card-title-group>
                    <!--                     <mat-card-subtitle>
                        Estado del workflow: {{ item.isAvailable == 1 ? "Workflow Habilitado" : "Workflow
                        Inhabilitado"
                        }}
                    </mat-card-subtitle> -->
                    <mat-card-content>
                        <p> Modulo: {{ item.id_module}} </p>
                        <p> Workflow de tipo : {{ item.isForm == true ? "Formulario" : "Solicitud" }} </p>
                    </mat-card-content>
                </mat-card>
            </mat-grid-tile>
        </mat-grid-list>
        <div class="mat-cell p-80" colspan="12" *ngIf="data_empty">
            <img src="../../assets/img/empty_data.svg" width="300">
            <h2>Sin datos</h2>
        </div>
        <mat-paginator [pageSizeOptions]="[6, 12, 18]" showFirstLastButtons aria-label="Seleccione">
        </mat-paginator>
    </div>
</div>
