<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('')"
      ></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>

<!-- 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()"
      translate
    >
      Add firmware
    </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 class="page-sticky-header c8y-list__item--empty-actions 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 }}"
        >
          {{ firmware.name }}
        </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">
            {{ firmware.description }}
          </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 }}"
          >
            {{ firmware.c8y_Filter?.type }}
          </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>