@if (isLoading) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
<h2 mat-dialog-title>Detalles del Producto</h2>
@if (!isLoading) {
  <mat-dialog-content>
    <div class="override_content_flex mt-10">
      <div class="col-flex-4">
        <app-slider [arrImages]="arrSlider" [width]="'100%'" />
  
        <div align="center">
          @if (objArtitles.DEAR_COWE) {
            <button mat-icon-button class="light_blue_primary_font" matTooltip="Disponible para Compra Web">
              <mat-icon>public</mat-icon>
            </button>
          }
          @if (!objArtitles.DEAR_COWE) {
            <button mat-icon-button class="red_dark_font" matTooltip="No disponible para Compra Web">
              <mat-icon>vpn_lock</mat-icon>
            </button>
          }
  
          @if (objArtitles.DEAR_TIPO === 'Caja') {
            <button mat-icon-button class="green_dark_font" matTooltip="Compra por Caja">
              <mat-icon>inventory_2</mat-icon>
            </button>
          
          }
          @if (objArtitles.DEAR_TIPO === 'Paquete') {
            <button mat-icon-button class="cyan_dark_font" matTooltip="Compra por Paquete">
              <mat-icon>bento</mat-icon>
            </button>
          }

          @if (objArtitles.DEAR_TIPO === 'Unidad') {
            <button mat-icon-button class="orange_dark_font" matTooltip="Compra por Unidad">
              <mat-icon>category</mat-icon>
            </button>
          }
  
        </div>
      </div>
      <div class="col-flex-8">
        <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>
  
        @if (objArtitles.DEAR_CARA !== null){
          <div class="mt-20 fz-12 just-txt">
            <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>Modelo:</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>
} @else {
  <mat-dialog-content>
    <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 mat-dialog-close cdkFocusInitial>Cancelar</button>
</mat-dialog-actions>
