<div class="card-block p-t-0 overflow-visible flex-no-shrink separator-bottom col-xs-12">
  <div class="row p-b-16">
    <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
      <h4 class="text-center m-b-16">{{ 'Select software' | translate }}</h4>
      <div class="row">
        <div class="col-md-6">
          <div class="input-group input-group-search">
            <input
              type="search"
              class="form-control"
              title="{{ 'Filter software…' | translate }}"
              placeholder="{{ 'Filter software…' | translate }}"
              [ngModel]="textFilter$ | async"
              (ngModelChange)="textFilter$.next($event)"
            />
            <span class="input-group-addon">
              <i c8yIcon="filter" *ngIf="(textFilter$ | async).length === 0"></i>
              <i
                c8yIcon="times"
                class="text-muted"
                *ngIf="(textFilter$ | async).length > 0"
                (click)="textFilter$.next('')"
              ></i>
            </span>
          </div>
        </div>
        <div class="col-xs-12 p-b-8 visible-xs visible-sm"></div>
        <div class="col-md-6">
          <c8y-form-group class="m-0">
            <c8y-typeahead
              name="deviceType"
              [(ngModel)]="selectedDeviceType"
              placeholder="{{ 'Type to filter device types…' | translate }}"
              (onSearch)="deviceType$.next($event)"
              [allowFreeEntries]="false"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                (click)="selectedDeviceType = {name: ''}; deviceType$.next('')"
              >
                <span>{{'All device types' | translate }}</span>
              </c8y-li>
              <c8y-li
              *ngFor="let deviceType of deviceTypes"
              class="p-l-8 p-r-8 c8y-list__item--link"
              (click)="selectedDeviceType = deviceType; deviceType$.next(deviceType.name)"
              [active]="selectedDeviceType === deviceType"
              >
              <c8y-highlight
              [text]="deviceType.name"
              [pattern]="deviceType$ | async"
              ></c8y-highlight>
              </c8y-li>
            </c8y-typeahead>
            <c8y-messages
            ><c8y-message
              name="notExisting"
              [text]="'Select one of the existing device types.' | translate"
            ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-xs-12 flex-grow no-gutter">
  <div class="card-inner-scroll fit-h">
    <div class="card-block p-t-0 p-b-0">
      <c8y-list-group [ngClass]="{ 'dd-low': (software$ | async)?.data.length < 10 }">
        <c8y-li *c8yFor="let software of software$ | async; loadMore: 'auto'">
          <c8y-li-icon>
            <i c8yIcon="c8y-tools"></i>
          </c8y-li-icon>
          <c8y-li-body class="content-flex-60">
            <div class="col-5">
              <div class="text-truncate" title="{{ software.name }}">
                {{ software.name }}
              </div>
            </div>
            <div class="col-3">
              <div class="text-truncate" title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(software) }}">
                <span class="text-label-small m-r-8" translate>
                  Device type
                </span>
                <span *ngIf="software.c8y_Filter?.type; else noType">
                  {{ software.c8y_Filter?.type }}
                </span>
                <ng-template #noType>
                  <small><em class="text-muted" translate>Undefined`device type`</em></small>
                </ng-template>
              </div>
            </div>
            <div class="col-2">
              <span *ngIf="isLegacy(software)" class="label label-warning flex-item-right-sm">
                <span translate>Legacy</span>
              </span>
              <span *ngIf="!isLegacy(software)">
                <span *ngIf="(getBaseVersionsCount$(software) | async) === null">
                  <span class="label label-info">
                    <i c8yIcon="circle-o-notch" class="icon-spin"></i>
                  </span>
                </span>
                <span *ngIf="(getBaseVersionsCount$(software) | async) !== null">
                  <span [ngPlural]="getBaseVersionsCount$(software) | async">
                    <ng-template ngPluralCase="=0">
                      <span class="label label-default flex-item-right-sm">
                        <span translate>No versions</span>
                      </span>
                    </ng-template>
                    <ng-template ngPluralCase="=1">
                      <span class="label label-info"><span translate>1 version</span></span>
                    </ng-template>
                    <ng-template ngPluralCase="other">
                      <span class="label label-info">
                        <span
                          ngNonBindable
                          translate
                          [translateParams]="{
                            count: (getBaseVersionsCount$(software) | async) || ''
                          }"
                          >{{ count }} versions</span
                        >
                      </span>
                    </ng-template>
                  </span>
                </span>
              </span>
            </div>
          </c8y-li-body>
          <c8y-li-collapse>
            <c8y-list-group>
              <c8y-li *c8yFor="let option of getVersions(software) | async">
                <c8y-li-radio
                  [name]="software.id"
                  (onSelect)="selectSoftware({ option: option, software: software })"
                ></c8y-li-radio>
                <c8y-li-body class="content-flex-40 p-r-16">
                  <div class="col-4">
                    {{ option.c8y_Software.version }}
                  </div>
                  <div class="col-5">
                    <div class="text-truncate" title="{{ option.c8y_Software.url }}">
                      <span class="text-label-small m-r-4" translate> File </span>
                      <span>{{ option.c8y_Software.url }}</span>
                    </div>
                  </div>
                  <div class="col-3" *ngIf="option.id === software.selectedId">
                    <div class="c8y-select-wrapper d-inline-block" style="margin: -4px 0;">
                      <select
                        id="action"
                        class="form-control input-sm"
                        [(ngModel)]="option.action"
                        (change)="emitSoftware({ option: option, software: software })"
                      >
                        <option [ngValue]="'install'">{{ 'Install/update`software`' | translate }}</option>
                        <option [ngValue]="'delete'">{{ 'Remove`software`' | translate }}</option>
                      </select>
                      <span></span>
                    </div>
                  </div>
                </c8y-li-body>
              </c8y-li>
            </c8y-list-group>
          </c8y-li-collapse>
        </c8y-li>
      </c8y-list-group>
    </div>
  </div>
</div>