@if ((baseVersions$ | async)?.data.length > 0) {
  <c8y-list-group class="m-b-16">
    <c8y-li *c8yFor="let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'">
      <c8y-li-icon>
        <i c8yIcon="c8y-firmware"></i>
      </c8y-li-icon>

      <c8y-li-body class="content-flex-50">
        <div class="col-10">
          <p>{{ baseVersion.c8y_Firmware.version }}</p>
        </div>
        <div class="col-2">
          @if (isLegacy$ | async) {
            <span class="label label-warning">
              {{ 'Legacy' | translate }}
            </span>
          }

          @if (!(isLegacy$ | async)) {
            <span>
              @if ((getPatchVersionsCount$(baseVersion) | async) === null) {
                <span>
                  <span class="label label-info">
                    <i
                      class="icon-spin"
                      c8yIcon="circle-o-notch"
                    ></i>
                  </span>
                </span>
              }

              @if ((getPatchVersionsCount$(baseVersion) | async) !== null) {
                <span>
                  <span [ngPlural]="getPatchVersionsCount$(baseVersion) | async">
                    <ng-template ngPluralCase="=0">
                      <span class="label label-default"><span translate>No patches</span></span>
                    </ng-template>
                    <ng-template ngPluralCase="=1">
                      <span class="label label-info">
                        <span translate>1 patch</span>
                      </span>
                    </ng-template>
                    <ng-template ngPluralCase="other">
                      <span class="label label-info">
                        <span
                          ngNonBindable
                          translate
                          [translateParams]="{ count: getPatchVersionsCount$(baseVersion) | async }"
                        >
                          {{ count }} patches
                        </span>
                      </span>
                    </ng-template>
                  </span>
                </span>
              }
            </span>
          }
        </div>
      </c8y-li-body>

      <c8y-li-collapse>
        <c8y-list-group>
          <c8y-li
            *c8yFor="
              let patchVersion of getBaseVersionAndPatches$(baseVersion) | async;
              let i = index;
              loadMore: 'auto'
            "
          >
            <c8y-li-radio
              (onSelect)="selectVersionOrPatch($event, patchVersion)"
              [selected]="patchVersion === selected"
            ></c8y-li-radio>
            <c8y-li-icon>
              <i c8yIcon="c8y-firmware"></i>
            </c8y-li-icon>
            <c8y-li-body class="content-flex-50">
              <div class="col-3">
                {{ patchVersion.c8y_Firmware.version }}
              </div>
              <div class="col-3">
                @if (patchVersion.c8y_Patch) {
                  <span
                    class="label label-info"
                    translate
                  >
                    patch
                  </span>
                } @else {
                  <span
                    class="label label-primary"
                    translate
                  >
                    version
                  </span>
                }
              </div>
              <div class="col-6 text-truncate">
                <span
                  class="text-label-small m-r-4"
                  translate
                >
                  File
                </span>
                @if (patchVersion.c8y_Firmware.url === '') {
                  <span title="{{ 'Provided by device' | translate }}">
                    {{ 'Provided by device' | translate }}
                  </span>
                } @else {
                  <span title="{{ getBinaryName$(patchVersion.c8y_Firmware.url) | async }}">
                    {{ getBinaryName$(patchVersion.c8y_Firmware.url) | async }}
                  </span>
                }
              </div>
            </c8y-li-body>
          </c8y-li>
        </c8y-list-group>
      </c8y-li-collapse>
    </c8y-li>
  </c8y-list-group>
}