<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast">
  <mat-grid-list cols="12" rowHeight="55px" class="card-title">
    <mat-grid-tile colspan="12">
      <mat-card-title>Administración de Usuarios</mat-card-title>
    </mat-grid-tile>
    <mat-grid-tile colspan="3" class="card-title">
      <mat-form-field appearance="legacy" *ngIf="dataSource.data.length != 0 || isFilter">
        <mat-label>Filtro de Usuarios</mat-label>
        <mat-select [(ngModel)]="filtro_usuarios" >
          <mat-option *ngFor="let item of filtro; let i = index" [value]="item.tipo" (click)="filterUser()"> {{ item.filtro }} </mat-option>
        </mat-select>
      </mat-form-field>

    </mat-grid-tile>
    <mat-grid-tile colspan="7" class="card-title" >
      <mat-form-field appearance="legacy" class="searcher" *ngIf="dataSource.data.length != 0">
        <mat-label>Buscador</mat-label>
        <input
          matInput
          placeholder="Ingrese lo que necesite buscar"
          (keyup)="applyFilter($event)"
        />
        <mat-icon matSuffix>search</mat-icon>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="2" class="card-title">
      <button
        mat-fab
        class="secondary"
        (click)="actionForm('Registro')"
        matTooltip="Registrar Nuevo"
        [disabled]="boton_register_disabled"
      >
        <mat-icon>add</mat-icon>
    </button>
    </mat-grid-tile>
  </mat-grid-list>

  <div *ngIf="data_empty" class="data-empty">
    No existen usuarios registrados
  </div>

  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
  <table
    mat-table
    [dataSource]="dataSource"
    class=" animated fadeIn"
    *ngIf="dataSource.data.length != 0"
  >
    <ng-container matColumnDef="no_empleado">
      <th mat-header-cell *matHeaderCellDef>
        Número de Empleado
      </th>
      <td mat-cell *matCellDef="let element">{{ element.IDUSUARIO }}</td>
    </ng-container>

    <ng-container matColumnDef="nombre">
      <th mat-header-cell *matHeaderCellDef>Nombre Completo</th>
      <td mat-cell *matCellDef="let element">
        {{ element.NOMBRE }} {{ element.APELLIDO_PATERNO }}
        {{ element.APELLIDO_MATERNO }}
      </td>
    </ng-container>

    <ng-container matColumnDef="correo">
      <th mat-header-cell *matHeaderCellDef>
        Correo Electrónico
      </th>
      <td mat-cell *matCellDef="let element">{{ element.EMAIL }}</td>
    </ng-container>

    <ng-container matColumnDef="rfc">
      <th mat-header-cell *matHeaderCellDef>R.F.C.</th>
      <td mat-cell *matCellDef="let element">{{ element.RFCUSUARIO }}</td>
    </ng-container>

    <ng-container matColumnDef="unidadNegocio">
      <th mat-header-cell *matHeaderCellDef>
        Unidad de Negocio
      </th>
      <td mat-cell *matCellDef="let element">{{ element.UNIDADNEGOCIO }}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Estado</th>
      <td mat-cell *matCellDef="let element">{{ element.ESTATUS }}</td>
    </ng-container>

    <ng-container matColumnDef="accion">
      <th mat-header-cell *matHeaderCellDef class="centre">Acciones</th>
      <td mat-cell *matCellDef="let element" class="centre">
        <button
          mat-mini-fab
          class="success mr-1"
          matTooltip="Ver Información"
          (click)="openDialogInfo(element)"
        >
          <mat-icon>visibility</mat-icon>
        </button>
        <button
          mat-mini-fab
          class="mr-1 secondary"
          matTooltip="Modificar"
          (click)="actionForm('Modificar', element)"
          [disabled]="element.ESTATUS == 'Eliminado'"
        >
          <mat-icon>edit</mat-icon>
        </button>
        <button
          mat-mini-fab
          class="mr-1 table-action-password"
          matTooltip="Cambiar Contraseña"
          (click)="openDialogPassword(element)"
          [disabled]="element.ESTATUS == 'Eliminado'"
        >
          <mat-icon>lock_open</mat-icon>
        </button>
        <button
            *ngIf="element.ESTATUS == 'Activo'"
          mat-mini-fab
          class="mr-1 table-action-block"
          matTooltip="Bloquear Acceso"
          (click)="openDialog(element, 'Bloquear')"
          [disabled]="element.ESTATUS == 'Eliminado'"
        >
            <mat-icon>remove_circle</mat-icon>
        </button>

        <button
          *ngIf="element.ESTATUS != 'Activo'"
          mat-mini-fab
          class="mr-1 table-action-block"
          matTooltip="Desbloquear Acceso"
          (click)="openDialog(element, 'Desbloquear')"
          [disabled]="element.ESTATUS == 'Eliminado'"
        >
            <mat-icon>remove_circle_outline</mat-icon>
        </button>


        <button
          mat-mini-fab
          color="warn"
          class="mr-1"
          matTooltip="Eliminar"
          (click)="openDialog(element, 'Eliminar')"
          [disabled]="element.ESTATUS == 'Eliminado'"
        >
          <mat-icon>delete</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
    [pageSizeOptions]="[10, 20, 50]"
    showFirstLastButtons
    aria-label="Seleccione"
  >
  </mat-paginator>
</mat-card>
