<c8y-title>
  {{ 'Software 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 software…' | translate }}"
      placeholder="{{ 'Filter software…' | 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 software' | translate }}" (click)="addSoftware()">
    <i c8yIcon="plus-circle"></i>
    {{ 'Add software' | translate }}
  </button>
</c8y-action-bar-item>

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

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

<!-- no results empty state -->
<div
  class="c8y-empty-state"
  *ngIf="(softwares$ | 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>

<!-- apply the class 'dd-low' when the list contains less than 10 records-->
<c8y-list-group
  class="m-b-24"
  *ngIf="(softwares$ | async)?.data.length > 0"
  [ngClass]="{ 'dd-low': (softwares$ | 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">
        {{ 'Software' | 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 software of softwares$ | async; let i = index; loadMore: 'auto'">
    <c8y-li-icon>
      <i c8yIcon="c8y-tools"></i>
    </c8y-li-icon>

    <c8y-li-body class="content-flex-60">
      <button class="btn-clean col-3" (click)="editSoftware(software)">
        <span class="text-truncate" title="{{ software.name }}">
          {{ software.name }}
        </span>
      </button>

      <div class="col-4">
        <p class="text-truncate" title="{{ software.description }}">
          <span class="text-label-small m-r-4 visible-xs-inline">
            {{ 'Description' | translate }}
          </span>
          <span *ngIf="software.description; else emptyDescription">
            {{ software.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"
          title="{{ 'Device type' | translate }}: {{ software.c8y_Filter?.type || '-' }}"
        >
          <span class="text-label-small m-r-8 visible-xs-inline" translate>
            Device type
          </span>
          <span *ngIf="software.c8y_Filter?.type; else emptyText">
            {{ software.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(software)">
          <span translate>
            Legacy
          </span>
        </span>
        <span *ngIf="!isLegacy(software)">
          <span *ngIf="(getBaseVersionsCount$(software) | async) === null">
            <span class="label label-info flex-item-right-sm">
              <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="=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$(software) | async }"
                  >
                    {{ count }} versions
                  </span>
                </span>
              </ng-template>
            </span>
          </span>
        </span>
      </div>
    </c8y-li-body>

    <c8y-li-action (click)="editSoftware(software)" icon="pencil">
      {{ 'Edit' | translate }}
    </c8y-li-action>
    <c8y-li-action (click)="deleteSoftware(software)" icon="trash">
      {{ 'Delete' | translate }}
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>