<div *ngFor="let comparisonResult of comparisonResults" class="d-contents">
  <div class="p-l-16 p-r-16" *ngIf="showProfileItems">
    <div class="c8y-list__item fit-h">
      <div class="c8y-list__item__block" *ngIf="comparisonResult.profile">
        <div class="c8y-list__item__icon">
          <i [c8yIcon]="icon"></i>
        </div>
        <div class="c8y-list__item__body">
          <ng-container *ngTemplateOutlet="comparisonResultInfo;context:comparisonResult.profile"></ng-container>
        </div>
      </div>
    </div>
  </div>
  <div class="p-l-16 p-r-16 bg-gray-white">
    <div
      class="c8y-list__item bg-gray-white"
      [ngClass]="{
        'has-warning': !!comparisonResult.comparisonAlert
      }"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i [c8yIcon]="icon"></i>
        </div>
        <div class="c8y-list__item__body">
          <ng-container *ngTemplateOutlet="comparisonResultInfo;context:comparisonResult.device ? comparisonResult.device : comparisonResult.profile"></ng-container>
          <c8y-messages
            class="m-0"
            style="margin-bottom: calc(var(--margin-base, 8px) * -1);"
            *ngIf="comparisonResult.comparisonAlert"
          >
            <c8y-message>
              {{ comparisonResult.comparisonAlert | translate }}
            </c8y-message>
          </c8y-messages>
        </div>
      </div>
    </div>
  </div>
  <div class="p-l-16 p-r-16 bg-white hidden-xs hidden-sm" *ngIf="!showProfileItems"></div>
</div>

<ng-template #comparisonResultInfo let-name="itemName" let-details="itemDetails">
 <div class="content-flex-40">
   <div class="col-7">
    <span class="text-truncate">
      <span class="text-label-small m-r-4">Name</span>
       <span title="{{ name }}">
           {{ name }}
        </span>
     </span>
   </div>
  <div class="col-5">
    <span *ngIf="showTextLabel && details; else showInfoLabel" class="text-truncate">
      <span translate class="text-label-small m-r-4">Version</span>
      <span title="{{details}}">{{ details }}</span>
    </span>
     <ng-template #showInfoLabel>
        <span class="label label-info">{{ details }}</span>
      </ng-template>
    </div>
  </div>
</ng-template>