<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>