
<h2 mat-dialog-title>Detalles del artículo</h2>
<mat-dialog-content class="p-0">

  <div class="options">
    <app-search-card
      [dataSource]="dataSource"
      [disabled]="isLoading"
      (dataValue)="dataSource = $event"
      class="ml-24"
    />

    <button 
      mat-raised-button 
      class="blue_dark_background white_font no_shadow mr-16 animated fadeIn fast" 
      (click)="openDialogForm('R')"
      [disabled]="isLoading">
      <mat-icon>add</mat-icon> Nuevo
    </button>
  </div>
  

  @if (!isLoading) {
    <table mat-table [dataSource]="dataSource" 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 }}</td>
      </ng-container> -->
      <ng-container matColumnDef="PRECIO">
        <th mat-header-cell *matHeaderCellDef> Precio </th>
        <td mat-cell *matCellDef="let element">{{ resourcesService.moneyFormat(element.PRECIO) }} {{ element.MONEDA }}</td>
      </ng-container>
      <ng-container matColumnDef="ESTADO">
        <th mat-header-cell *matHeaderCellDef> Estado <th>
        <td mat-cell *matCellDef="let element">
          <button mat-flat-button class="white_font" [class]="resourcesService.setChipList(element.ESTADO)">
            {{ element.ESTADO }}
          </button>
        </td>
      </ng-container>
      <ng-container matColumnDef="ACCIONES">
        <th mat-header-cell *matHeaderCellDef class="td_actions_2"> Acciones </th>
        <td mat-cell *matCellDef="let element; let index = index;" class="td_actions_2">
          <button 
            mat-mini-fab 
            color="primary" 
            matTooltip="Editar" 
            class="no_shadow ml-4" 
            [disabled]="element.ESTADO === 'Eliminado'"
            (click)="openDialogForm('M', index)">
            <mat-icon>edit</mat-icon>
          </button>
          @if (element.ESTADO !== 'Eliminado') {
            <button mat-mini-fab color="warn" matTooltip="Eliminar" class="no_shadow ml-4" (click)="updateState('E', index)">
              <mat-icon>delete</mat-icon>
            </button>
          } @else {
            <button mat-mini-fab matTooltip="Restaurar" class="cyan_dark_background white_font no_shadow ml-4" (click)="updateState('A', index)">
              <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="150"></object>
          <h2>Sin datos</h2>
        </td>
      </tr>
    </table>
  } @else {
    <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información de la descripción"/>
  }
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button cdkFocusInitial mat-dialog-close>Cerrar</button>
  <button mat-button (click)="save()">Guardar</button>
</mat-dialog-actions>
