<div class="main-container animated fadeIn" (window:resize)="onResize($event)">
    <div [class]="card_size">
        <h1 class="title-card">Historial de versiones</h1>

        <div class="filters mb-5">
            <div class="flex-item">
                <mat-form-field >
                    <mat-label>{{ 'workflow.historial.versiones.select' | translate}}</mat-label>
                    <mat-select (valueChange)="changeOriginal($event)">
                        <mat-option *ngFor="let item of workflows_versions" [value]="item"> {{ item.version }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div class="flex-item">
                <mat-form-field >
                    <mat-label>{{ 'workflow.historial.versiones.select' | translate}}</mat-label>
                    <mat-select (valueChange)="changeComparative($event)">
                        <mat-option *ngFor="let item of workflows_versions" [value]="item"> {{ item.version }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>

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

        <div class="container-versions">
            <div class="box-individual-version">

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

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

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

                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef>
                            {{ 'workflow.historial.versiones.tarea' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element">
                            {{ element.name }}
                        </td>
                    </ng-container>

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

                    <!--                 <ng-container matColumnDef="isValidated">
                                <th mat-header-cell *matHeaderCellDef>
                                    {{ 'workflow.historial.versiones.isValidated' | translate }}
                                </th>
                                <td mat-cell *matCellDef="let element">
                                    {{ element.isValidated }}
                            </ng-container> -->

                    <ng-container matColumnDef="isAvailable">
                        <th mat-header-cell *matHeaderCellDef>
                            {{ 'workflow.historial.versiones.isAvailable' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element">
                            {{ element.isAvailable == true ? 'Habilitada' : 'Inhabilitada' }}
                    </ng-container>


                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
                </table>

                <mat-paginator class="paginatorAdapter" #paginator *ngIf="showPaginator"
                    [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
                </mat-paginator>
            </div>

            <div class="box-individual-version">

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

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

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

                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef>
                            {{ 'workflow.historial.versiones.tarea' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element">
                            {{ element.name}}
                        </td>
                    </ng-container>

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

                    <ng-container matColumnDef="isAvailable">
                        <th mat-header-cell *matHeaderCellDef>
                            {{ 'workflow.historial.versiones.isAvailable' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element">
                            {{ element.isAvailable == true ? 'Habilitada' : 'Inhabilitada' }}
                    </ng-container>

                    <ng-container matColumnDef="accion">
                        <th mat-header-cell *matHeaderCellDef class="centre">{{ 'workflow.detalle.tabla.acciones' |
                            translate }}</th>
                        <td mat-cell *matCellDef="let element" class="centre table-action">
                            <button mat-mini-fab class="mr-1 secondary"
                                matTooltip="{{ 'workflow.historial.notificaciones.tabla.detalle' | translate }}">
                                <mat-icon>remove_red_eye</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 #paginatorComparative *ngIf="showPaginatorAux" [pageSizeOptions]="[10, 20, 50]"
                    showFirstLastButtons>
                </mat-paginator>
            </div>
        </div>
    </div>
</div>