<c8y-select-step-frame
  [header]="'Select software' | translate"
  [noResults]="
    ((textFilter$ | async)?.length ||
      (deviceType$ | async)?.length ||
      (softwareTypeFilter$ | async)?.length) &&
    (software$ | async)?.data.length === 0
  "
>
  <div
    class="row"
    filters
  >
    <div class="col-md-4 m-b-xs-8 m-b-sm-8">
      <div class="input-group input-group-search">
        <input
          class="form-control"
          title="{{ 'Filter…' | translate }}"
          placeholder="{{ 'Filter…' | translate }}"
          type="search"
          [ngModel]="textFilter$ | async"
          (ngModelChange)="textFilter$.next($event)"
        />
        <span class="input-group-addon">
          <i
            c8yIcon="search"
            *ngIf="(textFilter$ | async).length === 0"
          ></i>
          <i
            class="text-muted"
            c8yIcon="times"
            *ngIf="(textFilter$ | async).length > 0"
            (click)="textFilter$.next('')"
          ></i>
        </span>
      </div>
    </div>
    <div class="col-md-4 m-b-xs-8 m-b-sm-8">
      <c8y-form-group class="m-0">
        <c8y-typeahead
          placeholder="{{ 'Type to filter device types…' | translate }}"
          name="deviceType"
          [(ngModel)]="selectedDeviceType"
          (onSearch)="deviceType$.next($event)"
          [allowFreeEntries]="false"
        >
          <c8y-li
            class="p-l-8 p-r-8 c8y-list__item--link"
            (click)="selectedDeviceType = { name: '' }; deviceType$.next('')"
            [active]="!selectedDeviceType?.name"
          >
            <span>{{ 'All device types' | translate }}</span>
          </c8y-li>
          <c8y-li
            class="p-l-8 p-r-8 c8y-list__item--link"
            *ngFor="let deviceType of deviceTypes"
            (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 class="col-md-4">
      <c8y-form-group class="m-0">
        <c8y-software-type
          [required]="false"
          [emitResultsOnly]="true"
          [showBtnInNotFoundMessage]="false"
          [allowFreeEntries]="false"
          [placeholder]="'Type to filter software types…' | translate"
          [showClearSelectionOption]="true"
          (onSelectSoftware)="softwareTypeFilter$.next($event?.softwareType)"
        ></c8y-software-type>
        <c8y-messages>
          <c8y-message
            name="notExisting"
            [text]="'Select one of the existing device types.' | translate"
          ></c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </div>
  </div>
  <c8y-li
    class="hidden-sm hidden-xs m-r-8 m-l-8"
    header
  >
    <c8y-li-icon><i class="p-l-24"></i></c8y-li-icon>
    <c8y-li-body class="content-flex-40 p-r-32">
      <div class="col-5">
        <span
          class="text-truncate"
          title=" {{ 'Name' | translate }} "
        >
          {{ 'Name' | translate }}
        </span>
      </div>
      <div class="col-2">
        <span
          class="text-truncate"
          title="{{ 'Device type' | translate }}"
        >
          {{ 'Device type' | translate }}
        </span>
      </div>
      <div class="col-3">
        <span
          class="text-truncate"
          title="{{ 'Software type' | translate }}"
        >
          {{ 'Software 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>
    <c8y-li
      *c8yFor="let software of software$ | async; loadMore: 'auto'"
      #li
    >
      <c8y-li-icon>
        <i c8yIcon="c8y-tools"></i>
      </c8y-li-icon>
      <div class="content-flex-40">
        <div class="col-5 m-b-xs-8">
          <button
            class="btn-clean"
            title="{{ software.name }}"
            type="button"
            (click)="li.collapsed = !li.collapsed"
          >
            <c8y-highlight
              [text]="software.name"
              [pattern]="textFilter$ | async"
            ></c8y-highlight>
          </button>
        </div>
        <div class="col-2 m-b-xs-8">
          <div
            class="text-truncate"
            title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(software) }}"
          >
            <span
              class="text-label-small m-r-8 visible-xs visible-sm"
              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-3 m-b-xs-8">
          <span
            class="text-label-small m-r-8 visible-xs visible-sm"
            translate
          >
            Software type
          </span>
          <span
            class="label label-info"
            *ngIf="software.softwareType; else emptyText"
          >
            {{ software.softwareType }}
          </span>
          <ng-template #emptyText>
            <small class="text-muted">
              <em translate>Undefined`software type`</em>
            </small>
          </ng-template>
        </div>
        <div class="col-2">
          <span
            class="label label-warning m-l-auto-sm"
            *ngIf="isLegacy(software)"
          >
            <span translate>Legacy</span>
          </span>
          <span *ngIf="!isLegacy(software)">
            <span *ngIf="(getBaseVersionsCount$(software) | async) === null">
              <span class="label label-info">
                <i
                  class="icon-spin"
                  c8yIcon="circle-o-notch"
                ></i>
              </span>
            </span>
            <span *ngIf="(getBaseVersionsCount$(software) | async) !== null">
              <span [ngPlural]="getBaseVersionsCount$(software) | async">
                <ng-template ngPluralCase="=1">
                  <span
                    class="text-label-small m-r-8 visible-xs visible-sm"
                    translate
                  >
                    version
                  </span>
                  <span class="badge badge-info m-l-auto-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 m-l-auto-sm">
                    {{ getBaseVersionsCount$(software) | async }}
                  </span>
                </ng-template>
              </span>
            </span>
          </span>
        </div>
      </div>
      <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">
                <p class="text-truncate">
                  <span
                    class="text-label-small m-r-8"
                    translate
                  >
                    File
                  </span>
                  <ng-container *ngIf="option.c8y_Software.url === '$PROVIDED'; else fileDownload">
                    <span title="{{ 'Provided by device' | translate }}">
                      {{ 'Provided by device' | translate }}
                    </span>
                  </ng-container>
                  <ng-template #fileDownload>
                    <span title="{{ option.c8y_Software.url }}">
                      {{ option.c8y_Software.url }}
                    </span>
                  </ng-template>
                </p>
              </div>
              <div
                class="col-3 d-flex"
                *ngIf="option.id === software.selectedId"
              >
                <div
                  class="c8y-select-wrapper d-inline-block m-l-auto"
                  style="margin: -4px 0"
                >
                  <select
                    class="form-control input-sm"
                    id="action"
                    [(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>
</c8y-select-step-frame>