<c8y-preview-selection-frame
  [header]="'Confirm selection' | translate"
  [name]="selectedDeviceProfile?.name"
>
  <ng-container *previewBlock="'Device type' | translate">
    <ng-container *ngIf="selectedDeviceProfile?.c8y_Filter?.type; else noType">
      <span>{{ selectedDeviceProfile.c8y_Filter.type }}</span>
    </ng-container>
    <ng-template #noType> --- </ng-template>
  </ng-container>
  <c8y-list-group
    *previewBlock="'Firmware' | translate; if: selectedDeviceProfile?.c8y_DeviceProfile.firmware"
  >
    <c8y-li>
      <c8y-li-icon>
        <i c8yIcon="c8y-firmware"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-500">
        <div class="col-5">
          {{ selectedDeviceProfile.c8y_DeviceProfile.firmware.name }}
        </div>
        <div class="col-5">
          <span class="text-label-small m-r-8" translate> Version </span>
          <span>
            {{ selectedDeviceProfile.c8y_DeviceProfile.firmware.version }}
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
  <c8y-list-group *previewBlock="'Software' | translate; if: softwares?.length">
    <c8y-li *ngFor="let software of softwares">
      <c8y-li-icon>
        <i c8yIcon="c8y-tools"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-500">
        <div class="col-5">
          {{ software.name }}
        </div>
        <div class="col-5">
          <span class="text-label-small m-r-8" translate> Version </span>
          <span>
            {{ software.version }}
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
  <c8y-list-group *previewBlock="'Configuration' | translate; if: configurations?.length">
    <c8y-li *ngFor="let configuration of configurations">
      <c8y-li-icon>
        <i c8yIcon="c8y-tools"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-500">
        <div class="col-5">
          {{ configuration.name }}
        </div>
        <div class="col-5">
          <span class="label label-info" *ngIf="configuration.type">
            {{ configuration.type }}
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
</c8y-preview-selection-frame>