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

<c8y-breadcrumb>
  <c8y-breadcrumb-item [icon]="'c8y-atom'" [label]="'Ecosystem' | translate"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-modules'"
    [label]="'Applications' | translate"
    [path]="'ecosystem/applications'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [icon]="'big-parcel'" [label]="'Packages' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

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

<c8y-action-bar-item [placement]="'right'">
  <button
    type="button"
    (click)="loadPackages()"
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
  >
    <i [ngClass]="{ 'icon-spin': reloading }" c8yIcon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</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="/users-guide/administration/#extensions"></c8y-help>

<div [ngClass]="listClass" class="card-group">
  <div class="page-sticky-header hidden-xs d-flex" *ngIf="(packages$ | 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 *ngFor="let app of packages$ | async" class="col-xs-12 col-sm-4 col-md-3">
    <c8y-application-card
      (onAppDeleted)="loadPackages()"
      (onAppCloned)="loadPackages()"
      [app]="app"
      class="d-contents"
    ></c8y-application-card>
  </div>
</div>

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