<h2 mat-dialog-title>Detalles del Producto</h2>
<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
<mat-dialog-content *ngIf="!isLoading">
  <div style="width: 100%; display: flex; flex-direction: row; align-items: center;">
    <div style="width: 300px;">
      <img [src]="'http://192.168.1.4:8000/storage/GEAD/FO/' + objArtitles.DEAR_IMAG" alt="">

      <div align="center">
        <button mat-icon-button class="light_blue_primary_font" *ngIf="objArtitles.DEAR_COWE" matTooltip="Disponible para Compra Web">
          <mat-icon>public</mat-icon>
        </button>
        <button mat-icon-button class="red_dark_font" *ngIf="!objArtitles.DEAR_COWE" matTooltip="No disponible para Compra Web">
          <mat-icon>vpn_lock</mat-icon>
        </button>

        <button mat-icon-button class="green_dark_font" *ngIf="objArtitles.DEAR_TIPO === 'Caja'" matTooltip="Compra por Caja">
          <mat-icon>inventory_2</mat-icon>
        </button>
        <button mat-icon-button class="cyan_dark_font" *ngIf="objArtitles.DEAR_TIPO === 'Paquete'" matTooltip="Compra por Paquete">
          <mat-icon>bento</mat-icon>
        </button>
        <button mat-icon-button class="orange_dark_font" *ngIf="objArtitles.DEAR_TIPO === 'Unidad'" matTooltip="Compra por Unidad">
          <mat-icon>category</mat-icon>
        </button>

      </div>
    </div>
    <div style="width: calc(100% - 300px);" class="black_font">
      <div class="fz-24" style="display: flex; justify-content: space-between;">
        <b> {{ objArtitles.ARTI_NOMB }} </b>
      </div>

      <div class="mt-20 fz-12" style="display: flex; justify-content: space-between;">
        <p> {{ objArtitles.FAMI_NOMB }} - {{ objArtitles.SUBF_NOMB }}</p>
        <i> {{ objArtitles.PROV_NOCO }}</i>
      </div>

      <div class="mt-20 fz-12 just-txt">
        <b>Descripción:</b>
        <p> {{ objArtitles.DEAR_DESC }} </p>
      </div>

      <div class="mt-20 fz-12 just-txt" *ngIf="objArtitles.DEAR_CARA !== null">
        <b>Características:</b>
        <p> {{ objArtitles.DEAR_CARA }} </p>
      </div>

      <div class="mt-20 fz-12 just-txt" style="display: flex; justify-content: space-between;">
        <div>
          <b>Módelo:</b>
          <p> {{ objArtitles.INAR_MODE }} </p>
        </div>
        <div>
          <b>Código:</b>
          <p> {{ objArtitles.INAR_CODI }} </p>
        </div>
        <div>
          <b>Unidad:</b>
          <p> {{ objArtitles.UNID_NOMB }} </p>
        </div>
        <div>
          <b>Precio Unitario:</b>
          <p> $ {{ objArtitles.INAR_PREC }} {{ objArtitles.INAR_MONE }} </p>
        </div>
      </div>

      <div class="mt-20 fz-12 just-txt">
        <b>Detalles:</b>
        <p> {{ objArtitles.INAR_CARA }} </p>
      </div>
    </div>
  </div>
</mat-dialog-content>
<mat-dialog-content *ngIf="isLoading">
  <div style="padding: 100px;" align="center">
    <mat-spinner></mat-spinner>
    <b>Cargando Datos del Artículo</b>
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="warn" mat-dialog-close cdkFocusInitial>Cancelar</button>
</mat-dialog-actions>
