<c8y-preview-selection-frame [header]="'Confirm selection' | translate">
  <ng-container *previewBlock="'Device type' | translate">
    <ng-container *ngIf="deviceTypes.length > 0; else noType">
      <span *ngFor="let deviceType of deviceTypes; let last = last"
        >{{ deviceType }}{{ last ? '' : ', ' }}</span
      >
    </ng-container>
    <ng-template #noType>
      <em class="text-muted" translate>Undefined`device type`</em>
    </ng-template>
  </ng-container>
  <c8y-list-group
    *previewBlock="'Installations/updates`software`' | translate; if: !!selectedToInstall.length"
  >
    <c8y-li *ngFor="let selectedItem of selectedToInstall">
      <c8y-li-icon>
        <i c8yIcon="c8y-tools"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-10">
        <div class="col-6 text-truncate" title="{{ selectedItem.software.name }}">
          {{ selectedItem.software.name }}
        </div>
        <div class="col-6 text-right" *ngIf="!!selectedItem?.version?.c8y_Software?.version">
          <span class="text-label-small m-r-4" translate> Version </span>
          <span>
            {{ selectedItem.version.c8y_Software.version }}
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
  <c8y-list-group *previewBlock="'Removals`software`' | translate; if: !!selectedToDelete.length">
    <c8y-li *ngFor="let selectedItem of selectedToDelete">
      <c8y-li-icon>
        <i c8yIcon="c8y-tools"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-10">
        <div class="col-6">
          {{ selectedItem.software.name }}
        </div>
        <div class="col-6 text-right">
          <span class="text-label-small m-r-8" translate> Version </span>
          <span>
            {{ selectedItem.version.c8y_Software.version }}
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
</c8y-preview-selection-frame>