<div class="main-container animated fadeIn" (window:resize)="onResize()">
  <div [class]="card_size">
    <h1 class="title-card">Gestión de Tablas Dinámicas</h1>

    <!-- BUSCADOR Y BOTÓN DE REGISTRO -->
    <div align="center" class="w-100 mb-10">
      <div class="action-header">
        <!-- BOTÓN PARA RECARGAR LA TABLA -->
        <button mat-mini-fab color="info" class="mr-20 no-shadow" matTooltip="Actualizar Datos"
          (click)="consultarTablasDinamicas()">
          <mat-icon>refresh</mat-icon>
        </button>
        <!-- BUSCADOR -->
        <mat-form-field appearance="fill">
          <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>
        <!-- BOTÓN DE REGISTRO -->
        <div class="ml-20">
          <button mat-stroked-button color="primary" routerLink="/sam/getbtb-create" [disabled]="isLoadingForm"
            *ngIf="!btnSmall">
            <mat-icon>add</mat-icon> Registrar
          </button>
          <button mat-mini-fab color="primary" class="no-shadow" routerLink="/sam/getbtb-create"
            [disabled]="isLoadingForm" *ngIf="btnSmall">
            <mat-icon>add</mat-icon>
          </button>
        </div>
      </div>
    </div>

    <!-- ALERTA - CARGANDO DATOS... -->
    <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
      <mat-spinner align="center"></mat-spinner>
      <h3>Cargando datos ...</h3>
    </div>

    <!-- ALERTA - CARGANDO FORMULARIOS -->
    <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

    <!-- TABLA -->
    <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn" *ngIf="!isLoading">
      <ng-container matColumnDef="nombre">
        <th mat-header-cell *matHeaderCellDef>Nombre de la tabla</th>
        <td mat-cell *matCellDef="let element">{{ element.NOMBRE_TABLA_DIN }}</td>
      </ng-container>

      <ng-container matColumnDef="modulo">
        <th mat-header-cell *matHeaderCellDef>Módulo</th>
        <td mat-cell *matCellDef="let element">{{ element.MODULO }}</td>
      </ng-container>

      <ng-container matColumnDef="submodulo">
        <th mat-header-cell *matHeaderCellDef>Submódulo</th>
        <td mat-cell *matCellDef="let element">
          {{ element.SUBMODULO !== null ? element.SUBMODULO : "Sin submodulo" }}
        </td>
      </ng-container>

      <ng-container matColumnDef="menu">
        <th mat-header-cell *matHeaderCellDef>Menú</th>
        <td mat-cell *matCellDef="let element">
          {{ element.SUBMODULO !== null ? element.SUBMODULO : "Sin submodulo" }}
        </td>
      </ng-container>

      <ng-container matColumnDef="estado">
        <th mat-header-cell *matHeaderCellDef style="text-align: center">Estado</th>
        <td mat-cell *matCellDef="let element" style="text-align: center">
          <mat-chip-listbox>
            <mat-chip color="success" selected *ngIf="element.ESTADO === 'Activo'">
              {{ element.ESTADO }}
            </mat-chip>
            <mat-chip color="warn" selected *ngIf="element.ESTADO === 'Eliminado'">
              {{ element.ESTADO }}
            </mat-chip>
          </mat-chip-listbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="acciones">
        <th mat-header-cell *matHeaderCellDef style="text-align: center">
          Acciones
        </th>
        <td mat-cell *matCellDef="let element" style="text-align: center">
          <div *ngIf="btnSmall">
            <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger class="no-shadow">
              <mat-icon>settings</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm"
                (click)="openEdit(element.IDTABLA)">
                <mat-icon>edit</mat-icon>
                Modificar
              </button>
              <button mat-menu-item (click)="alert('ELM', element)"
                [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm">
                <mat-icon>delete</mat-icon>
                Eliminar
              </button>
            </mat-menu>
          </div>
          <div *ngIf="!btnSmall">
            <button mat-mini-fab color="primary" class="button-accion"
              [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm" (click)="openEdit(element.IDTABLA)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-mini-fab color="warn" class="button-accion" matTooltip="Eliminar"
              (click)="alert('ELM', element)" [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm">
              <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>
    <!-- BOTÓN DE REGRESAR -->
    <button mat-mini-fab color="primary" class="btnRegresar" matTooltip="Regresar">
      <mat-icon>keyboard_backspace</mat-icon>
    </button>

    <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
  </div>
</div>
