<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
<div class="flex-space-between">
  <h2 mat-dialog-title>Detalles del Artículo</h2>
  <button mat-raised-button class="blue_dark_background white_font override_no_shadow mr-16 animated fadeIn fast" (click)="openDialog('FORM_DETAILS')">
    <mat-icon>add</mat-icon> Nuevo
  </button>
</div>
<mat-dialog-content class="p-0">

  <div align="center" *ngIf="isLoading">
    <mat-spinner></mat-spinner>
  </div>

  <div *ngIf="!isLoading">
    <table mat-table [dataSource]="dataSourceDetails" matSort>
      <ng-container matColumnDef="CODIGO">
        <th mat-header-cell *matHeaderCellDef> Código </th>
        <td mat-cell *matCellDef="let element"> {{ element.CODIGO }} </td>
      </ng-container>
      <ng-container matColumnDef="MODELO">
        <th mat-header-cell *matHeaderCellDef> Modelo </th>
        <td mat-cell *matCellDef="let element"> {{ element.MODELO }} </td>
      </ng-container>
      <ng-container matColumnDef="CANTIDAD">
        <th mat-header-cell *matHeaderCellDef> Cantidad </th>
        <td mat-cell *matCellDef="let element"> {{ element.CANTIDAD }} {{ arrUnits[dataDialog.TIPO_UNIDAD] }}</td>
      </ng-container>
      <ng-container matColumnDef="PRECIO">
        <th mat-header-cell *matHeaderCellDef> Precio </th>
        <td mat-cell *matCellDef="let element"> $ {{ element.PRECIO }} {{ element.MONEDA.codigo }}</td>
      </ng-container>
      <ng-container matColumnDef="ESTADO">
        <th mat-header-cell *matHeaderCellDef> Estado <th>
        <td mat-cell *matCellDef="let element">
          <mat-chip class="teal_primary_background" *ngIf="element.ESTADO === 'Activo' || element.ESTADO === 'Nuevo' || element.ESTADO === 'Modificado'">Activo</mat-chip>
          <mat-chip class="red_dark_background" *ngIf="element.ESTADO === 'Eliminado'">Eliminado</mat-chip>
        </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="primary" matTooltip="Editar" class="override_no_shadow ml-4" (click)="openDialog('FORM_DETAILS', element)" [disabled]="element.ESTADO === 'Eliminado'">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-mini-fab color="warn" matTooltip="Eliminar" class="override_no_shadow ml-4" (click)="openDialog('ELIM_DETAILS', element)" *ngIf="element.ESTADO !== 'Eliminado'">
            <mat-icon>close</mat-icon>
          </button>
          <button mat-mini-fab matTooltip="Restaurar" class="cyan_dark_background white_font override_no_shadow ml-4" (click)="openDialog('REST_DETAILS', element)" *ngIf="element.ESTADO === 'Eliminado'">
            <mat-icon>autorenew</mat-icon>
          </button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumnsDetails"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsDetails;"></tr>
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell pv-10 centre" colspan="12">
          <object data="assets/img/empty_data.svg" width="200"></object>
          <h2>Sin datos</h2>
        </td>
      </tr>
    </table>
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button cdkFocusInitial mat-dialog-close (click)="openDialog('CLOSE')">Cerrar</button>
</mat-dialog-actions>
