<h1 mat-dialog-title class="prevent-select">Gestión de ocupaciones</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog-actions-row" *ngIf="!isLoading && !hasError">
    <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="dialog-actions-buttons">
      <button mat-flat-button color="primary" class="mr-10 animated fadeIn" (click)="openNewOccupationDialog('new')">
        <mat-icon>add</mat-icon> Registrar ocupación
      </button>
      <button mat-mini-fab class="orange_primary_background white_font override_no_shadow" matTooltip="Actualizar datos" (click)="getOccupations()">
        <mat-icon>refresh</mat-icon>
      </button>
    </div>
  </div>
  <div class="animated fadeIn" [ngClass]="{ table_dialog_details_column: !isLoading && !hasError, hidden: isLoading }">
    <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn">
      <ng-container matColumnDef="AREA">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Área</th>
        <td mat-cell *matCellDef="let element">{{ element.NOMBREAREA }}</td>
      </ng-container>
      <ng-container matColumnDef="OCUPACION">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Ocupación</th>
        <td mat-cell *matCellDef="let element">{{ element.OCUPACION }}</td>
      </ng-container>
      <ng-container matColumnDef="DESC">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Descripción</th>
        <td mat-cell *matCellDef="let element">{{ element.DESCRIPCION }}</td>
      </ng-container>
      <ng-container matColumnDef="ESTADO">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
        <td mat-cell *matCellDef="let element">{{ element.ESTADO }}</td>
      </ng-container>
      <ng-container matColumnDef="ULMOD">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Última modificación</th>
        <td mat-cell *matCellDef="let element">
          {{ element.USRMOD == null ? element.USRREG : element.USRMOD }} {{ element.FECMOD == null ? element.FECREG : element.FECMOD }}
        </td>
      </ng-container>
      <ng-container matColumnDef="ACCIONES">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
        <td mat-cell *matCellDef="let element">
          <button mat-mini-fab color="primary" class="override_no_shadow gray_dark_font transparent_background" matTooltip="Configuración" [matMenuTriggerFor]="menu" 
          [disabled]="element.ESTADO == 'Eliminado'">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu>
            <button mat-menu-item (click)="openNewOccupationDialog('edit', element)">
              <mat-icon>edit</mat-icon> Editar ocupación
            </button>
            <button mat-menu-item (click)="confirmDelete(element)">
              <mat-icon>delete</mat-icon> Eliminar ocupación
            </button>
          </mat-menu>
        </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="300"></object>
          <h2>Sin datos</h2>
        </td>
      </tr>
    </table>
  </div>
  <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator" [ngClass]="{ hidden: isLoading }"></mat-paginator>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>