<c8y-list-group class="bg-inherit">
  <ng-container *ngIf="(plugins$ | async)?.length !== 0; else emptyList">
    <ng-container *ngFor="let plugin of plugins$ | async">
      <c8y-li
        [ngClass]="{
          disabled: plugin.installed,
          selected: selectedPlugin?.id === plugin?.id
        }"
      >
        <div class="d-flex fit-w">
          <ng-container *ngIf="plugin.readmePath">
            <button
              class="c8y-list__item__btn d-flex fit-w gap-4"
              title="{{ 'Details' | translate }}"
              (click)="showPluginOverview(plugin)"
            >
              <c8y-plugin-list-item
                class="d-contents"
                (isItemSelected)="updateSelectedItems($event, plugin)"
                [plugin]="plugin"
                [selectable]="selectable"
                [hideSource]="hideSource"
              ></c8y-plugin-list-item>
              <i
                class="icon-24 m-l-auto a-s-center"
                c8yIcon="forward"
              ></i>
            </button>
          </ng-container>
          <ng-container *ngIf="!plugin.readmePath">
            <c8y-plugin-list-item
              class="d-contents"
              (isItemSelected)="updateSelectedItems($event, plugin)"
              [plugin]="plugin"
              [selectable]="selectable"
              [hideSource]="hideSource"
            ></c8y-plugin-list-item>
          </ng-container>
        </div>
        <div class="p-l-40 m-t-4 d-flex flex-wrap gap-8">
          <button
            class="btn btn-danger btn-sm"
            title="{{ 'Uninstall plugin' | translate }}"
            *ngIf="installable"
            (click)="uninstallPlugin(plugin)"
            [ngClass]="{ 'btn-pending': plugin.id === updatingPluginId.uninstall }"
            [disabled]="updatingPluginId.uninstall && plugin.id === updatingPluginId.uninstall"
            data-cy="plugin-list--uninstall-plugin-button"
            translate
          >
            Uninstall plugin
          </button>
          <button
            class="btn btn-default btn-sm m-0"
            title="{{ 'Install plugin' | translate }}"
            *ngIf="installable"
            (click)="installPlugin(plugin)"
            [ngClass]="{ 'btn-pending': plugin.id === updatingPluginId.install }"
            [disabled]="updatingPluginId.install && plugin.id === updatingPluginId.install"
            data-cy="plugin-list--install-plugin-button"
            translate
          >
            Install plugin
          </button>
        </div>
      </c8y-li>
    </ng-container>
  </ng-container>
</c8y-list-group>
<ng-template #emptyList>
  <c8y-ui-empty-state
    [icon]="'plugin'"
    [title]="emptyListText | translate"
    [horizontal]="true"
    *ngIf="emptyListText"
  ></c8y-ui-empty-state>
</ng-template>