<c8y-title>
  {{ 'Firmware repository' | translate }}
</c8y-title>

<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form">
  <div class="input-group input-group-search">
    <input
      class="form-control"
      type="search"
      title="{{ 'Filter firmware…' | translate }}"
      placeholder="{{ 'Filter firmware…' | translate }}"
      [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('')"
        px-event="Clear filtering firmware"
      ></i>
    </span>
  </div>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" title="{{ 'Add firmware' | translate }}" (click)="addFirmware()">
    <i c8yIcon="plus-circle"></i>
    {{ 'Add firmware' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    *ngIf="canAddFirmwarePatch$ | async"
    title="{{ 'Add firmware patch' | translate }}"
    (click)="addFirmwarePatch()"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add firmware patch' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" title="{{ 'Reload' | translate }}" (click)="reload$.next()">
    <i c8yIcon="refresh" [ngClass]="{ 'icon-spin': reloading }"></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help src="/users-guide/device-management/#firmware-repo"></c8y-help>

<!-- empty state-->
<div
  class="c8y-empty-state text-center"
  *ngIf="(firmwares$ | async)?.data.length === 0 && (textFilter$ | async)?.length === 0"
>
  <h1 class="c8y-icon-duocolor" c8yIcon="c8y-firmware"></h1>
  <h3 translate>No firmwares to display.</h3>
  <p translate>Add a new firmware by clicking below.</p>
  <p>
    <button
      class="btn btn-primary"
      title="{{ 'Add firmware' | translate }}"
      (click)="addFirmware()"
    >
      {{ 'Add firmware' | translate }}
    </button>
  </p>
</div>

<!-- no results empty state -->
<div
  class="c8y-empty-state"
  *ngIf="(firmwares$ | async)?.data.length === 0 && (textFilter$ | async)?.length > 0"
>
  <h1 class="c8y-icon-duocolor" c8yIcon="search"></h1>
  <h3 translate>No results to display.</h3>
  <p translate>Refine your search terms or check your spelling.</p>
</div>

<c8y-list-group
  class="m-b-24"
  *ngIf="(firmwares$ | async)?.data.length > 0"
  [ngClass]="{ 'dd-low': (firmwares$ | async)?.data.length < 10 }"
>
  <c8y-li [emptyActions]="true" class="page-sticky-header hidden-xs">
    <c8y-li-icon>
      <i class="p-l-24"></i>
    </c8y-li-icon>
    <c8y-li-body class="content-flex-60">
      <div class="col-3">
        {{ 'Firmware' | translate }}
      </div>
      <div class="col-4">
        {{ 'Description' | translate }}
      </div>
      <div class="col-3">
        {{ 'Device type' | translate }}
      </div>
      <div class="col-2">
        {{ 'Versions' | translate }}
      </div>
    </c8y-li-body>
  </c8y-li>

  <c8y-li *c8yFor="let firmware of firmwares$ | async; let i = index; loadMore: 'auto'">
    <c8y-li-icon icon="c8y-firmware"></c8y-li-icon>
    <c8y-li-body class="content-flex-60">
      <button class="btn-clean col-3" (click)="editFirmware(firmware)">
        <span class="text-truncate" title="{{ firmware.name }}">
          <c8y-highlight
            [text]="firmware.name || '-'"
            elementClass="text-info"
            [pattern]="textFilter$ | async"
          ></c8y-highlight>
        </span>
      </button>
      <div class="col-4">
        <p class="text-truncate" title="{{ firmware.description }}">
          <span class="text-label-small m-r-4 visible-xs-inline">
            {{ 'Description' | translate }}
          </span>
          <span *ngIf="firmware.description; else emptyDescription">
            <c8y-highlight
              [text]="firmware.description || '-'"
              elementClass="text-info"
              [pattern]="textFilter$ | async"
            ></c8y-highlight>
          </span>
        </p>
        <ng-template #emptyDescription>
          <small class="text-muted">
            <em>{{ 'No description' | translate }}</em>
          </small>
        </ng-template>
      </div>
      <div class="col-3">
        <div class="text-truncate">
          <span class="text-label-small m-r-4 visible-xs-inline" translate> Device type </span>
          <span
            *ngIf="firmware.c8y_Filter?.type; else emptyText"
            title="{{ firmware.c8y_Filter?.type }}"
          >
            <c8y-highlight
              [text]="firmware.c8y_Filter?.type || '-'"
              elementClass="text-info"
              [pattern]="textFilter$ | async"
            ></c8y-highlight>
          </span>
          <ng-template #emptyText>
            <small class="text-muted">
              <em>{{ 'Undefined' | translate }}</em>
            </small>
          </ng-template>
        </div>
      </div>
      <div class="col-2">
        <span class="label label-warning flex-item-right-sm" *ngIf="isLegacy(firmware)">
          <span translate> Legacy </span>
        </span>

        <span *ngIf="!isLegacy(firmware)">
          <span *ngIf="(getBaseVersionsCount$(firmware) | async) === null">
            <span class="label label-info flex-item-right-sm">
              <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 flex-item-right-sm">
                  <span translate> No versions </span>
                </span>
              </ng-template>
              <ng-template ngPluralCase="=1">
                <span class="label label-info flex-item-right-sm">
                  <span translate> 1 version </span>
                </span>
              </ng-template>
              <ng-template ngPluralCase="other">
                <span class="label label-info flex-item-right-sm">
                  <span
                    ngNonBindable
                    translate
                    [translateParams]="{ count: getBaseVersionsCount$(firmware) | async }"
                  >
                    {{ count }} versions
                  </span>
                </span>
              </ng-template>
            </span>
          </span>
        </span>
      </div>
    </c8y-li-body>

    <c8y-li-action (click)="editFirmware(firmware)" icon="pencil">
      {{ 'Edit' | translate }}
    </c8y-li-action>

    <c8y-li-action (click)="deleteFirmware(firmware)" icon="trash">
      {{ 'Delete' | translate }}
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>