<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 m-b-16">{{ 'Select firmware' | translate }}</h4>
      <div class="input-group input-group-search">
        <input
          type="search"
          class="form-control"
          title="{{ 'Filter firmware…' | translate }}"
          placeholder="{{ 'Filter firmware…' | 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>
</div>
<c8y-search-result-empty *ngIf="(textFilter$ | async).length > 0 && elementCount===0">
</c8y-search-result-empty>
<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': elementCount <= DD_LOW_COUNT }">
        <c8y-li *c8yFor="let firmware of firmwares$ | async; let i = index; loadMore: 'auto'">
          <c8y-li-radio (onSelect)="selectFirmware($event, firmware)" [selected]="firmware === selected"></c8y-li-radio>
          <c8y-li-icon>
            <i c8yIcon="c8y-firmware"></i>
          </c8y-li-icon>

          <c8y-li-body class="content-flex-60">
            <div class="col-3">
              <div class="text-truncate" title="{{ firmware.name }}">
                {{ firmware.name }}
              </div>
            </div>
            <div class="col-4">
              <div class="text-truncate" title="{{ getDescriptionTitle(firmware) }}">
                <small *ngIf="firmware.description; else noDesc">
                  {{ firmware.description }}
                </small>
                <ng-template #noDesc>
                  <small>
                    <em class="text-muted" translate>No description available</em>
                  </small>
                </ng-template>
              </div>
            </div>
            <div class="col-3">
              <div class="text-truncate" title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(firmware) }}">
                <span class="text-label-small m-r-8" translate>
                  Device type
                </span>
                <span *ngIf="firmware.c8y_Filter?.type; else noType">
                  {{ firmware.c8y_Filter?.type }}
                </span>
                <ng-template #noType>
                  <em class="text-muted" translate>Undefined`device type`</em>
                </ng-template>
              </div>
            </div>
            <div class="col-2">
              <span *ngIf="isLegacy(firmware)" class="label label-warning">
                <span translate>Legacy</span>
              </span>

              <span *ngIf="!isLegacy(firmware)">
                <span *ngIf="(getBaseVersionsCount$(firmware) | async) === null">
                  <span class="label label-info">
                    <i c8yIcon="circle-o-notch" class="icon-spin"></i>
                  </span>
                </span>
                <span *ngIf="(getBaseVersionsCount$(firmware) | async) !== null">
                  <span [ngPlural]="getBaseVersionsCount$(firmware) | async">
                    <ng-template ngPluralCase="=0">
                      <span class="label label-default">
                        <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$(firmware) | async
                          }"
                          >{{ count }} versions</span
                        >
                      </span>
                    </ng-template>
                  </span>
                </span>
              </span>
            </div>
          </c8y-li-body>
        </c8y-li>
      </c8y-list-group>
    </div>
  </div>
</div>