<c8y-select-step-frame
  [header]="'Select firmware' | translate"
  [noResults]="(textFilter$ | async).length > 0 && elementCount === 0"
>
  <div filters 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>
  <c8y-li header class="hidden-sm hidden-xs m-r-8 m-l-8">
    <c8y-li-icon><i class="p-l-32 p-r-40"></i></c8y-li-icon>
    <c8y-li-body class="content-flex-40">
      <div class="col-3">
        <span class="text-truncate" title=" {{ 'Name' | translate }} ">
          {{ 'Name' | translate }}
        </span>
      </div>
      <div class="col-4">
        <span class="text-truncate" title="{{ 'Description' | translate }}">
          {{ 'Description' | translate }}
        </span>
      </div>
      <div class="col-3">
        <span class="text-truncate" title="{{ 'Device type' | translate }}">
          {{ 'Device type' | translate }}
        </span>
      </div>
      <div class="col-2">
        <span class="text-truncate" title="{{ 'Versions' | translate }}">
          {{ 'Versions' | translate }}
        </span>
      </div>
    </c8y-li-body>
  </c8y-li>
  <c8y-list-group list [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-40">
        <div class="col-3 m-b-xs-8">
          <div class="text-truncate" title="{{ firmware.name }}">
            <c8y-highlight [text]="firmware.name" [pattern]="textFilter$ | async"></c8y-highlight>
          </div>
        </div>
        <div class="col-4 m-b-xs-8">
          <div class="text-truncate" title="{{ getDescriptionTitle(firmware) }}">
            <span class="text-label-small m-r-8 visible-xs visible-sm" translate>
              Description
            </span>
            <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 m-b-xs-8">
          <div
            class="text-truncate"
            title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(firmware) }}"
          >
            <span class="text-label-small m-r-8 visible-xs visible-sm" 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 flex-item-right-sm">
            <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="text-label-small m-r-8 visible-xs visible-sm" translate>
                    version
                  </span>
                  <span class="badge badge-info flex-item-right-sm">1</span>
                </ng-template>
                <ng-template ngPluralCase="other">
                  <span class="text-label-small m-r-8 visible-xs visible-sm" translate>
                    versions
                  </span>
                  <span class="badge badge-info flex-item-right-sm">
                    {{ getBaseVersionsCount$(firmware) | async }}
                  </span>
                </ng-template>
              </span>
            </span>
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
</c8y-select-step-frame>