<div
  class="d-contents"
  *ngFor="let comparisonResult of comparisonResults"
>
  <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-level-1">
    <div
      class="c8y-list__item bg-level-1"
      [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-level-0 hidden-xs hidden-sm"
    *ngIf="!showProfileItems"
  ></div>
</div>

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