<h2 mat-dialog-title>Detalles del Artículo</h2>
<mat-dialog-content>
  <div align="end">
    <button mat-raised-button class="blue_dark_background white_font override-no-shadow ml-5 animated fadeIn fast" (click)="openDialog('FORM_DETAILS')">
      <mat-icon>add</mat-icon> Nuevo
    </button>
  </div>
  <table mat-table [dataSource]="dataSourceDetails" matSort>
    <ng-container matColumnDef="NO">
      <th mat-header-cell *matHeaderCellDef> No </th>
      <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
    </ng-container>
    <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 }} </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="CARACTERISTICAS">
      <th mat-header-cell *matHeaderCellDef> Características <th>
      <td mat-cell *matCellDef="let element"> {{ element.CARACTERISTICAS }} </td>
    </ng-container>
    <ng-container matColumnDef="ESTADO">
      <th mat-header-cell *matHeaderCellDef> Características <th>
      <td mat-cell *matCellDef="let element">
        <mat-chip class="teal_primary_background" *ngIf="element.ESTADO === 'Activo'">{{ element.ESTADO }}</mat-chip>
        <mat-chip class="red_dark_background" *ngIf="element.ESTADO === 'Eliminado'">{{ element.ESTADO }}</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 color="info" matTooltip="Restaurar" class="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 p-80 centre" colspan="12">
        <object data="assets/img/empty_data.svg" width="200"></object>
        <h2>Sin datos</h2>
      </td>
    </tr>
  </table>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button class="red_primary_font" cdkFocusInitial mat-dialog-close (click)="openDialog('CLOSE')">Cerrar</button>
</mat-dialog-actions>
