<c8y-title>{{ app | humanizeAppName | async }}</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/application/applications'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="app | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Plugins' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

@if (!(isStandard$ | async)) {
  <c8y-action-bar-item [placement]="'right'">
    <button
      class="btn btn-link"
      title="{{ 'Reset to default plugins' | translate }}"
      [ngClass]="{ 'btn-pending': isLoading }"
      (click)="resetToDefault()"
    >
      <i c8yIcon="undo"></i>
      {{ 'Reset to default plugins' | translate }}
    </button>
  </c8y-action-bar-item>
}

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Install plugins' | translate }}"
    (click)="installPlugins()"
    [ngClass]="{ 'btn-pending': isLoading }"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Install plugins' | translate }}
  </button>
</c8y-action-bar-item>

@let orphanedPlugins = orphanedPlugins$ | async;
@if (orphanedPlugins?.length) {
  <c8y-action-bar-item [placement]="'right'">
    <button
      class="btn btn-link"
      title="{{ 'Clean up orphaned plugins' | translate }}"
      (click)="cleanupOrphanedPlugins(orphanedPlugins)"
      [ngClass]="{ 'btn-pending': isLoading }"
    >
      <i c8yIcon="erase"></i>
      {{ 'Clean up orphaned plugins' | translate }}
    </button>
  </c8y-action-bar-item>
}

<div class="content-fullpage d-flex d-col border-top">
  <c8y-data-grid
    class="d-contents"
    [title]="title"
    [loadMoreItemsLabel]="loadMoreItemsLabel"
    [loadingItemsLabel]="loadingItemsLabel"
    [displayOptions]="displayOptions"
    [columns]="columns"
    [rows]="installedPlugins$ | async"
    [pagination]="pagination"
    [selectable]="true"
    [actionControls]="actionControls"
    [bulkActionControls]="bulkActionControls"
    [headerActionControls]="headerActionControls"
    (onReload)="refresh()"
  >
    <c8y-ui-empty-state
      [icon]="stats?.size > 0 ? 'search' : 'plugin'"
      [title]="stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)"
      [subtitle]="stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)"
      *emptyStateContext="let stats"
      [horizontal]="stats?.size > 0"
    >
      @if (stats?.size === 0) {
        <p>
          <button
            class="btn btn-primary btn-sm"
            title="{{ 'Install plugins' | translate }}"
            (click)="installPlugins()"
            [ngClass]="{ 'btn-pending': isLoading }"
            translate
          >
            Install plugins
          </button>
        </p>
      }
    </c8y-ui-empty-state>
  </c8y-data-grid>
</div>