<mat-card class="card-versions mat-elevation-z8 animated fadeIn fast">
    <mat-grid-list cols="12" rowHeight="45px" class="card-title">
        <mat-grid-tile colspan="12">
            <mat-card-title>
                {{ 'workflow.historial.notificaciones.titulo' | translate }}
            </mat-card-title>
        </mat-grid-tile>
        <mat-grid-tile colspan="2">
            <a mat-mini-fab style="left: 10%;" class="secondary" (click)="backToWorkflows()">
                <mat-icon>arrow_back</mat-icon>
            </a>
        </mat-grid-tile>

        <mat-grid-tile colspan="8">
            <p class="centre display-text">{{ 'workflow.historial.versiones.subtitulo' | translate}}</p>
        </mat-grid-tile>
    </mat-grid-list>

    <div class="filters mb-5">
        <div class="flex-item">
            <mat-form-field appearance="legacy">
                <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 appearance="legacy">
                <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="row">
        <div class="col-6">
            <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 #paginator class="paginatorAdapter" [hidden]="!showPaginator"
                [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
            </mat-paginator>
        </div>

        <div class="col-6">
            <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="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>

                <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 [hidden]="!showPaginatorAux" class="paginatorAdapter"
                [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
            </mat-paginator>
        </div>
    </div>

</mat-card>