<div class="card-block p-t-0 flex-no-shrink separator-bottom col-xs-12">
  <div class="row p-b-16">
    <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
      <h4 class="text-center text-gray">{{ 'Confirm selection' | translate }}</h4>
    </div>
  </div>
</div>
<div class="col-xs-12 flex-grow no-gutter">
  <div class="card-inner-scroll fit-h">
    <div class="card-block">
      <div class="row p-b-16">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <div class="text-truncate" title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(selectedDeviceProfile) }}">
            <span class="legend form-block" translate>Device type</span>
            <ng-container *ngIf="selectedDeviceProfile?.c8y_Filter?.type; else noType">
              <span>{{ selectedDeviceProfile.c8y_Filter.type }}</span>
            </ng-container>
            <ng-template #noType>
              ---
            </ng-template>
          </div>
        </div>
      </div>
      <div class="row p-b-16" *ngIf="selectedDeviceProfile?.c8y_DeviceProfile.firmware">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <span class="legend form-block" translate>Firmware</span>
          <c8y-list-group>
            <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>
        </div>
      </div>
      <div class="row p-b-16" *ngIf="softwares.length">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <span class="legend form-block" translate>Software</span>
          <c8y-list-group>
            <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>
        </div>
      </div>
      <div class="row p-b-16" *ngIf="configurations.length">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <span class="legend form-block" translate>Configuration</span>
          <c8y-list-group>
            <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>
        </div>
      </div>
    </div>
  </div>
</div>