<div class="equipment-details-container" (window:resize)="onResize()" 
[ngClass]="{ equipment_details_container_row: screenWidth > 840, equipment_details_container_column: screenWidth <= 840 }">
  <div class="equipment-images-container">
    <button mat-icon-button class="backward-button" [disabled]="images.length < 2" (click)="backward()">
      <mat-icon>chevron_left</mat-icon>
    </button>
    <button mat-icon-button class="forward-button" [disabled]="images.length < 2" (click)="forward()">
      <mat-icon>chevron_right</mat-icon>
    </button>
    <img *ngIf="images.length > 0" [src]="images[imageIndex]" [alt]="'IMG' + imageIndex">
    <div *ngIf="images.length < 1">
      <b>Sin imágenes.</b>
    </div>
  </div>
  <div class="equipment-details-column border_left" [ngClass]="{ border_left: screenWidth > 840 }">
    <div class="form-row">
      <div class="form-cell C12 center_text border_bottom overflow-ellipsis">
        {{ equipment!.CODIGO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Tipo: </span>{{ equipment!.TIPO_EQUIPAMIENTO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1200 }">
        <span class="bold">Modelo: </span>{{ equipment!.MODELO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth <= 1200 && screenWidth > 980 }">
        <span class="bold">ID: </span>{{ equipment!.ID_EQUIPAMIENTO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1200 }">
        <span class="bold">Familia: </span>{{ equipment!.FAMILIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Subfamilia: </span>{{ equipment!.SUBFAMILIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Estado: </span>{{ equipment!.ESTADO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C04: screenWidth > 1200, C12: screenWidth <= 1200, border_right: screenWidth > 1200 }">
        <span class="bold">Jerarquía: </span>{{ equipment!.JERARQUIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C08: screenWidth > 1200, C12: screenWidth <= 1200 }">
        <span class="bold">Equipo padre: </span>{{ equipment!.EQUIPO_PADRE == null ? '-' : equipment!.EQUIPO_PADRE }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Tipo de codificación: </span>{{ equipment!.TIPO_CODIGO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Ubicación de origen: </span>{{ equipment!.UBICACION_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Nivel de origen: </span>{{ equipment!.NIVEL_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Ocupación de origen: </span>{{ equipment!.OCUPACION_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Elemento de origen: </span>{{ equipment!.ELEMENTO_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Intersección en PCC: </span>{{ equipment!.INTERSECCION_PCC == null ? 'No aplica' : equipment!.INTERSECCION_PCC }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Posición en PCC: </span>{{ equipment!.POSICION_PCC == null ? 'No aplica' : equipment!.POSICION_PCC }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Kilómetro de origen: </span>{{ equipment!.KILOMETRO_ORIGEN == null ? 'No aplica' : equipment!.KILOMETRO_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Ubicación de destino: </span>{{ equipment!.UBICACION_DESTINO == null ? 'No aplica' : equipment!.UBICACION_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Nivel de destino: </span>{{ equipment!.NIVEL_DESTINO == null ? 'No aplica' : equipment!.NIVEL_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Ocupación de destino: </span>{{ equipment!.OCUPACION_DESTINO == null ? 'No aplica' : equipment!.OCUPACION_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Elemento de destino: </span>{{ equipment!.ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.ELEMENTO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Kilómetro de destino: </span>{{ equipment!.KILOMETRO_DESTINO == null ? 'No aplica' : equipment!.KILOMETRO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Fecha de adquisición: </span>{{ equipment!.FECHA_ADQUISICION }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Fecha de inicio de la garantía: </span>{{ equipment!.FECHA_INICIO_GARANTIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Fecha de término de la garantía: </span>{{ equipment!.FECHA_TERMINO_GARANTIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Proveedor: </span>{{ equipment!.PROVEEDOR }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Software requerido: </span>{{ equipment!.DENOMINACION_SOFTWARE == null ? 'No aplica' : equipment!.DENOMINACION_SOFTWARE }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Versión del software: </span>{{ equipment!.VERSION_SOFTWARE == null ? 'No aplica' : equipment!.VERSION_SOFTWARE }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Estado de funcionamiento: </span>{{ equipment!.ESTADO_FUNCIONAMIENTO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Usuario que registró: </span>{{ equipment!.USUARIO_REGISTRO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Fecha de registro: </span>{{ equipment!.FECHA_REGISTRO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Usuario que modificó: </span>{{ equipment!.USUARIO_MODIFICACION == null ? '-' : equipment!.USUARIO_MODIFICACION }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Fecha última modificación: </span>{{ equipment!.FECHA_MODIFICACION == null ? '-' : equipment!.FECHA_MODIFICACION }}
      </div>
      <div class="form-cell C12 center_text">
        <button mat-mini-fab class="override_no_shadow white_font amber_primary_background mr-10" color="primary" matTooltip="Historial de códigos" 
        (click)="openCodesHistory()">
          <mat-icon>history</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow mr-10" color="primary" matTooltip="Documentos relacionados" (click)="openDocumentsList()">
          <mat-icon>description</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow white_font blue_primary_background mr-10" matTooltip="Administrar planes de mantenimiento" 
        (click)="openMaintenancePlans()">
          <mat-icon>menu_book</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow mr-10" color="warn" matTooltip="Exportar a PDF">
          <mat-icon>picture_as_pdf</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow white_font green_primary_background" matTooltip="Exportar a Excel">
          <mat-icon svgIcon="xls"></mat-icon>
        </button>
      </div>
    </div>
  </div>
</div>