<div class="equipment-details-container">
  <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">
    <div class="form-row">
      <div class="form-cell C12 center_text border_bottom">
        {{ equipment!.CODIGO }}
      </div>
      <div class="form-cell C04 border_bottom border_right">
        <span class="bold">Tipo: </span>{{ equipment!.TIPO_EQUIPAMIENTO }}
      </div>
      <div class="form-cell C04 border_bottom border_right">
        <span class="bold">Modelo: </span>{{ equipment!.MODELO }}
      </div>
      <div class="form-cell C04 border_bottom">
        <span class="bold">ID: </span>{{ equipment!.ID_EQUIPAMIENTO }}
      </div>
      <div class="form-cell C04 border_bottom border_right">
        <span class="bold">Familia: </span>{{ equipment!.FAMILIA }}
      </div>
      <div class="form-cell C04 border_bottom border_right">
        <span class="bold">Subfamilia: </span>{{ equipment!.SUBFAMILIA }}
      </div>
      <div class="form-cell C04 border_bottom">
        <span class="bold">Estado: </span>{{ equipment!.ESTADO }}
      </div>
      <div class="form-cell C04 border_bottom border_right">
        <span class="bold">Jerarquía: </span>{{ equipment!.JERARQUIA }}
      </div>
      <div class="form-cell C08 border_bottom">
        <span class="bold">Equipo padre: </span>{{ equipment!.EQUIPO_PADRE == null ? '-' : equipment!.EQUIPO_PADRE }}
      </div>
      <div class="form-cell C03 border_bottom border_right">
        <span class="bold">Tipo de codificación: </span>{{ equipment!.TIPO_CODIGO }}
      </div>
      <div class="form-cell C03 border_bottom border_right">
        <span class="bold">Ubicación de origen: </span>{{ equipment!.UBICACION_ORIGEN }}
      </div>
      <div class="form-cell C03 border_bottom border_right">
        <span class="bold">Nivel de origen: </span>{{ equipment!.NIVEL_ORIGEN }}
      </div>
      <div class="form-cell C03 border_bottom overflow-ellipsis">
        <span class="bold">Ocupación de origen: </span>{{ equipment!.OCUPACION_ORIGEN }}
      </div>
      <div class="form-cell C03 border_bottom overflow-ellipsis">
        <span class="bold">Elemento de origen: </span>{{ equipment!.ELEMENTO_ORIGEN }}
      </div>
    </div>
  </div>
</div>