<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="{{ this.title }}">
            <span class="legend form-block" translate>Device type</span>
            <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>
          </div>
        </div>
      </div>
      <div class="row p-b-16" *ngIf="selectedToInstall.length">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <span class="legend form-block" translate>Installations/updates`software`</span>
          <c8y-list-group>
            <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">
                  <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>
        </div>
      </div>
      <div class="row p-b-16" *ngIf="selectedToDelete.length">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <span class="legend form-block" translate>Removals`software`</span>
          <c8y-list-group>
            <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>
        </div>
      </div>
    </div>
  </div>
</div>