<div class="card--grid grid__col--6-6--md">
  <div class="bg-white card-block sticky-top">
    <h5 class="legend form-block">{{ sectionTitle | translate }}</h5>
  </div>
  <div class="bg-gray-white  card-block sticky-top hidden-xs hidden-sm">
    <h5 class="legend form-block">{{ sectionTitle | translate }}</h5>
  </div>
  <div class="bg-white p-l-16 p-r-16">
    <hr class="m-0" />
  </div>
  <div class="bg-gray-white p-l-16 p-r-16">
    <hr class="m-0" />
  </div>
  <div class="d-contents" *ngIf="!isProfileSelected || isEmpty">
    <div class="p-l-16 p-r-16">
      <div class="c8y-empty-state text-left">
        <h1 [c8yIcon]="sectionIcon" class="c8y-icon-duocolor"></h1>
        <p>
          <span>{{ emptyStateText | translate }}</span
          ><br />
          <small *ngIf="isProfileSelected; else noItems">
            {{ emptyStateDetails | translate }}
          </small>
          <ng-template #noItems>
            <small translate>No device profile selected</small>
          </ng-template>
        </p>
      </div>
    </div>
  </div>
  <div class="bg-gray-white" *ngIf="items.length === 0"></div>
  <c8y-device-profile-item-list
    *ngIf="items.length > 0"
    [icon]="sectionIcon"
    [comparisonResults]="items"
    [showProfileItems]="isProfileSelected && !isEmpty"
    [showTextLabel]="showTextLabel"
    class="d-contents"
  ></c8y-device-profile-item-list>
  <div class="bg-white p-t-24" *ngIf="isProfileSelected && !isEmpty"></div>
  <div class="bg-gray-white p-t-24" *ngIf="isProfileSelected && !isEmpty"></div>
</div>