<c8y-title>{{ 'Extensions' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-atom'"
    [label]="'Ecosystem' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'big-parcel'"
    [path]="'ecosystem/extension/extensions'"
    [label]="'Extensions' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item
  [placement]="'right'"
  *ngIf="hasAdminPermissions"
>
  <button
    class="btn btn-link"
    title="{{ 'Add extension package' | translate }}"
    type="button"
    data-cy="packages-list--add-extension-package"
    (click)="addPackage()"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add extension package' | translate }}
  </button>
</c8y-action-bar-item>

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

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="p-r-8 p-l-8"
>
  <c8y-list-filters
    *ngIf="packages$ | async"
    [packageTypes]="packageTypes"
    [packageAvailabilities]="packageAvailabilities"
    [packageContents]="packageContents"
    (filterPipeChange)="setFilterPipe($event)"
  ></c8y-list-filters>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form hidden-xs"
>
  <c8y-list-display-switch
    (onListClassChange)="listClass = $event"
    [listLength]="(packages$ | async)?.length"
  ></c8y-list-display-switch>
</c8y-action-bar-item>

<c8y-help src="/docs/standard-tenant/ecosystem/#extensions"></c8y-help>

<div
  class="card-group"
  [ngClass]="listClass"
>
  <div
    class="page-sticky-header hidden-xs d-flex m-b-8"
    *ngIf="(filteredPackages$ | async)?.length > 0"
  >
    <div class="card-block card-column-40">
      <div class="card-appicon p-l-32 p-r-16 m-r-0 m-l-4"></div>
      {{ 'Package' | translate }}
    </div>
    <div class="card-block p-0 card-column-80 m-r-40">
      <div class="card-block card-column-80">{{ 'Description' | translate }}</div>
      <div class="card-block card-column-20">{{ 'Type' | translate }}</div>
      <div class="card-block card-column-20"></div>
    </div>
  </div>
  <div
    class="col-xs-12 col-sm-4 col-md-3"
    *ngFor="let app of filteredPackages$ | async"
  >
    <c8y-application-card
      class="d-contents"
      (onAppDeleted)="loadPackages()"
      (onAppCloned)="loadPackages()"
      [app]="app"
    ></c8y-application-card>
  </div>
</div>

<c8y-ui-empty-state
  [icon]="'big-parcel'"
  [title]="'No extensions to display.' | translate"
  [subtitle]="hasAdminPermissions ? (emptyStateSubtitle | translate) : ''"
  *ngIf="(packages$ | async)?.length === 0"
>
  <div *ngIf="hasAdminPermissions">
    <button
      class="btn btn-primary"
      title="{{ 'Add extension package' | translate }}"
      type="button"
      (click)="addPackage()"
    >
      {{ 'Add extension package' | translate }}
    </button>
  </div>
</c8y-ui-empty-state>

<c8y-ui-empty-state
  [icon]="'search'"
  [title]="'No matching extensions.' | translate"
  [subtitle]="'Refine your search terms and/or the filters' | translate"
  *ngIf="(packages$ | async)?.length > 0 && (filteredPackages$ | async)?.length === 0"
>
  <button
    class="btn btn-primary"
    title="{{ 'Reset filters' | translate }}"
    type="button"
    (click)="resetFilters()"
  >
    {{ 'Reset filters' | translate }}
  </button>
</c8y-ui-empty-state>