<main class="main-container animated fadeIn" (window:resize)="onResize()">
    <header id="navigation" class="btn-navigate mb-8">
        <div class="prev-page prevent-select indigo_primary_background
            mat-elevation-z8" matRipple [routerLink]="['/sam/GPRS']">
            <mat-icon style="color: white">arrow_back</mat-icon>
            <div class="page-name ml-4">Menú de Gestión del Personal</div>
        </div>
    </header>

    <mat-card class="override-card override-elevation-z8">
        <section class="override-section">
            <nav class="override-nav">
                <mat-card-title class="mat-card-title centre">Lista de
                    Equipos de Trabajo</mat-card-title>
                <div class="override-actions">
                    <mat-form-field appearance="outline" class="w-300p mr-8">
                        <mat-label>Buscador</mat-label>
                        <input matInput [(ngModel)]="txtBuscador"
                            (keyup)="applyFilter($event,'INP')"
                            placeholder="Ingrese la palabra a buscar" />
                        <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
                        <mat-icon *ngIf="txtBuscador.length> 0"
                            class="clickable" matTooltip="Eliminar filtro"
                            (click)="applyFilter('', 'EST')" matSuffix>close</mat-icon>
                    </mat-form-field>
                    <div class="override-buttons">
                        <button mat-raised-button color="primary"
                            matTooltip="Registrar Formulario"
                            [disabled]="isLoadingForm" *ngIf="!btnSmall"
                            class="override-no-shadow mr-10"
                            (click)="openDialog('REG')">
                            <mat-icon>add</mat-icon> Nuevo
                        </button>
                        <button mat-mini-fab color="primary"
                            matTooltip="Registrar Formulario"
                            [disabled]="isLoadingForm" *ngIf="btnSmall"
                            class="override-no-shadow mr-8"
                            (click)="openDialog('REG')">
                            <mat-icon>add</mat-icon>
                        </button>
                        <button mat-mini-fab color="info" matTooltip="Actualizar
                            Datos" class="override-no-shadow mr-10">
                            <mat-icon>refresh</mat-icon>
                        </button>
                    </div>
                </div>
            </nav>
            <div>
                <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
                    <mat-spinner align="center"></mat-spinner>
                    <h3>Cargando datos ...</h3>
                </div>
                <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
            </div>
            <!-- <div class="override-table">
                 //TABLA 
                <table mat-table [dataSource]="dataSource" matSort
                    class="animated fadeIn" *ngIf="!isLoading">
                    <ng-container matColumnDef="CODIGO_EQUIPAMIENTO">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Equipamiento</th>
                        <td mat-cell *matCellDef="let element">{{
                            element.SINT_COEQ }}</td>
                    </ng-container>
                    <ng-container matColumnDef="FALLA">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Falla</th>
                        <td mat-cell *matCellDef="let element">{{
                            element.LIFA_NOFA }}</td>
                    </ng-container>
                    <ng-container matColumnDef="CAUSA">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Causa</th>
                        <td mat-cell *matCellDef="let element">{{
                            element.SINT_CAUS }}</td>
                    </ng-container>
                    <ng-container matColumnDef="CLASIFICACION">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Clásificación</th>
                        <td mat-cell *matCellDef="let element">
                            <b *ngIf="element.SINT_CLAS === 'Bajo'"
                                class="green_primary_font">{{ element.SINT_CLAS
                                }}</b>
                            <b *ngIf="element.SINT_CLAS === 'Intermedio'"
                                class="light_blue_primary_font">{{
                                element.SINT_CLAS }}</b>
                            <b *ngIf="element.SINT_CLAS === 'Alto'"
                                class="amber_dark_font">{{ element.SINT_CLAS }}</b>
                            <b *ngIf="element.SINT_CLAS === 'Crítico'"
                                class="red_dark_font">{{ element.SINT_CLAS }}</b>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="LIMITE_VALOR">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Valor
                            Límite Permitido</th>
                        <td mat-cell *matCellDef="let element">{{
                            element.SINT_LIVA }} {{ element.LIME_ACRO }}</td>
                    </ng-container>
                    <ng-container matColumnDef="USUARIO_REGISTRA">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Usuario
                            Modificación</th>
                        <td mat-cell *matCellDef="let element">{{
                            resourcesService.selectUser(element.SINT_USRE,
                            element.SINT_USMO) }}</td>
                    </ng-container>
                    <ng-container matColumnDef="FECHA_REGISTRA">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha
                            Modificación</th>
                        <td mat-cell *matCellDef="let element">{{
                            resourcesService.formatDate(element.SINT_FERE,
                            element.SINT_FEMO) }}</td>
                    </ng-container>
                    <ng-container matColumnDef="ESTADO">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
                        <td mat-cell *matCellDef="let element">
                            <mat-chip-listbox>
                                <mat-chip class="teal_primary_background"
                                    selected *ngIf="element.SINT_ESTA ===
                                    'Activo'"
                                    (click)="applyFilter(element.SINT_ESTA,
                                    'EST')"> {{ element.SINT_ESTA }} </mat-chip>
                                <mat-chip class="red_dark_background" selected
                                    *ngIf="element.SINT_ESTA === 'Inactivo'"
                                    (click)="applyFilter(element.SINT_ESTA,
                                    'EST')"> {{ element.SINT_ESTA }} </mat-chip>
                            </mat-chip-listbox>
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="ACCIONES">
                        <th mat-header-cell *matHeaderCellDef>Acciones</th>
                        <td mat-cell *matCellDef="let element">
                            <button mat-mini-fab color="accent" *ngIf="btnSmall"
                                [disabled]="element.SINT_ESTA == 'Inactivo' ||
                                isLoadingForm" [matMenuTriggerFor]="menu"
                                #menuTrigger class="override-no-shadow">
                                <mat-icon>settings</mat-icon>
                            </button>
                            <mat-menu #menu="matMenu">
                                <button mat-menu-item (click)="openDialog('UPD',
                                    element)">
                                    <mat-icon>edit</mat-icon> Editar
                                </button>
                                <button mat-menu-item (click)="openDialog('DEL',
                                    element)">
                                    <mat-icon>delete</mat-icon> Eliminar
                                </button>
                            </mat-menu>

                            <div *ngIf="!btnSmall">
                                /* <button
                          mat-mini-fab
                          class="light_blue_primary_background override-no-shadow mr-4"
                          [disabled]="element.SINT_ESTA == 'Inactivo' || isLoadingForm"
                          matTooltip="Ver Síntoma"
                          (click)="openDialog('UPD', element)">
                          <mat-icon>info</mat-icon>
                        </button> */
                                <button
                                    mat-mini-fab
                                    color="primary"
                                    class="override-no-shadow mr-4"
                                    [disabled]="element.SINT_ESTA == 'Inactivo'
                                    || isLoadingForm"
                                    matTooltip="Editar Síntoma"
                                    (click)="openDialog('UPD', element)">
                                    <mat-icon>edit</mat-icon>
                                </button>
                                <button
                                    mat-mini-fab
                                    color="warn"
                                    class="override-no-shadow mr-4"
                                    [disabled]="element.SINT_ESTA == 'Inactivo'
                                    || isLoadingForm"
                                    matTooltip="Eliminar Síntoma"
                                    (click)="openDialog('DEL', element)">
                                    <mat-icon>delete</mat-icon>
                                </button>
                            </div>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
                    <tr class="mat-row" *matNoDataRow>
                        <td class="mat-cell p-80 centre" colspan="12">
                            <object data="assets/img/empty_data.svg"
                                width="300"></object>
                            <h2>Sin datos</h2>
                        </td>
                    </tr>
                </table>
            </div> -->
        </section>
        <mat-paginator [pageSizeOptions]="[10, 50, 100]"
            class="override-paginator"></mat-paginator>
    </mat-card>

</main>