<main class="main-container animated fadeIn">
    <app-btn-navigate navigate="goback" nameButton="Regresar" />
    <mat-card class="override-card override-elevation-z8">
        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
        <section class="override-section">
            <nav class="override-nav">
                <div class="w-100 align-center pv-15">
                    <span class="override-main-title">Gestión de Nivel | Almacen {{ idWarehouse }} | Área {{ idArea }}</span>
                </div>
                <div class="override-actions">
                    <app-search-card 
                        [dataSource]="dataSource" 
                        [disabled]="isLoading || isLoadingForm" 
                        (dataValue)="dataSource = $event" />
    
                    <div class="override-buttons">
                        <app-btn-resize 
                            class="mr-8"
                            (click)="goForm('REG')"
                            [disabled]="isLoading || isLoadingForm"
                            [backgroundColor]="'primary'" 
                            [textColor]="'white_font'" 
                            [nameButton]="'Nuevo'" 
                            [icon]="'add'"/>
                        <button 
                            mat-mini-fab 
                            matTooltip="Actualizar Datos"
                            (click)="getLevelByAreaWarehouse()"
                            class="cyan_dark_background white_font override_no_shadow ml-8">
                            <mat-icon>refresh</mat-icon>
                        </button>
                    </div>
                </div>
            </nav>
    
            <app-loading-card 
                [isLoading]="isLoading"
                [txtLoading]="'Cargando documentos'"
            />
    
            <div class="override-table">
                <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                    <ng-container matColumnDef="CODIGO_NIVEL">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Código </th>
                        <td mat-cell *matCellDef="let element"> {{ element.CODIGO_NIVEL }} </td>
                    </ng-container>
                    <ng-container matColumnDef="NOMBRE_NIVEL">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre del Nivel </th>
                        <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_NIVEL }} </td>
                    </ng-container>
                    <ng-container matColumnDef="COMENTARIOS">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Comentarios </th>
                        <td mat-cell *matCellDef="let element"> {{ element.COMENTARIOS }} </td>
                    </ng-container>
                    <ng-container matColumnDef="FECHA_REGISTRA">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Última Modificación </th>
                        <td mat-cell *matCellDef="let element"> {{ element.FECHA_REGISTRA }} </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"> {{ element.USUARIO_REGISTRA }} </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 
                                [class]="resourcesService.setChipList(element.ESTADO)"
                                selected> {{ element.ESTADO }} 
                            </mat-chip>
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="ACCIONES">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Acciones </th>
                        <td mat-cell *matCellDef="let element">
                            <div *ngIf="!resourcesService.onResize()">
                                <button 
                                    mat-mini-fab 
                                    class="blue_dark_background white_font override_no_shadow ml-4" 
                                    matTooltip="Ver Zonas"  
                                    (click)="goZoneManagement(element)"
                                    [disabled]="isLoadingForm">
                                    <mat-icon>inventory_2</mat-icon>
                                </button>
                                <button 
                                    mat-mini-fab 
                                    color="primary"
                                    class="override_no_shadow ml-4" 
                                    matTooltip="Editar Área"  
                                    (click)="goForm('UPD', element)"
                                    [disabled]="isLoadingForm || element.ESTADO === 'Eliminado'">
                                    <mat-icon>edit</mat-icon>
                                </button>
                                <button 
                                    mat-mini-fab 
                                    color="warm"
                                    class="override_no_shadow ml-4"
                                    matTooltip="Eliminar Área" 
                                    (click)="alert('ELI', element)"
                                    [disabled]="isLoadingForm || element.ESTADO === 'Eliminado'">
                                    <mat-icon>delete</mat-icon>
                                </button>
                            </div>
                            <div *ngIf="resourcesService.onResize()">
                                <button 
                                    mat-mini-fab 
                                    color="primary" 
                                    class="override_no_shadow" 
                                    matTooltip="Clic para desplegar" 
                                    [matMenuTriggerFor]="menu" 
                                    [disabled]="isLoadingForm"
                                    #menuTrigger>
                                    <mat-icon>more_vert</mat-icon>
                                </button>
                                <mat-menu #menu="matMenu">
                                    <button mat-menu-item (click)="goZoneManagement(element)">
                                        <mat-icon>inventory_2</mat-icon> Ver Zonas
                                    </button>
                                    <button mat-menu-item (click)="goForm('UPD', element)" [disabled]="element.ESTADO === 'Eliminado'">
                                        <mat-icon>edit</mat-icon> Editar Área
                                    </button>
                                    <button mat-menu-item (click)="alert('ELI', element)" [disabled]="element.ESTADO === 'Eliminado'">
                                        <mat-icon>delete</mat-icon> Eliminar Área
                                    </button>
                                </mat-menu>
                            </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-20 align-center" colspan="12">
                        <object data="assets/img/empty_data.svg" width="150"></object>
                        <h2>Sin datos</h2>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
        <mat-paginator [pageSizeOptions]="[10, 20, 50]" class="override-paginator" showFirstLastButtons></mat-paginator>
    </mat-card>
</main>