<div class="card-header gap-8 d-col p-l-24 p-r-24 separator-bottom flex-no-shrink">
    <div
      class="card-title h4 text-center"
      translate
    >
      Available plugins
    </div>
    <c8y-list-filters
      (filterPipeChange)="setFilterPipe($event)"
      [packageTypes]="packageTypes"
    >
      <c8y-archived-filter></c8y-archived-filter>
      <c8y-only-latest-filter></c8y-only-latest-filter>
    </c8y-list-filters>
  </div>
  <div class="d-grid grid__col--5-7--md min-height-0 flex-grow">
    <c8y-plugin-list
      class="inner-scroll bg-level-1"
      (selectedItems)="selectedPlugins = $event"
      [emptyListText]="'No matching plugins' | translate"
      [plugins$]="filteredPlugins$"
      [selectable]="true"
      [selectedPlugin]="selectedPlugin"
      (showOverview)="showPluginOverview($event)"
    ></c8y-plugin-list>
    <div class="inner-scroll bg-component">
      <div class="card-header separator sticky-top bg-inherit"
        *ngIf="pluginMarkdown">
        <button
          class="m-l-auto btn-clean"
          title="{{ 'Close' | translate }}"
          type="button"
          (click)="selectedPlugin = null; pluginMarkdown = null"
        >
          <i c8yIcon="times"></i>
        </button>
      </div>
      <div class="card-block p-l-24 p-r-24">
        <div
          class="markdown-content"
          *ngIf="pluginMarkdown"
          [innerHTML]="pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async"
        ></div>
        <c8y-ui-empty-state
          [icon]="'user-manual'"
          [title]="'No plugin selected' | translate"
          [subtitle]="
            'Select a plugin from the list to view its documentation.' | translate"
          *ngIf="!pluginMarkdown"
          [horizontal]="true"
        >
          <p>
            <small >
              {{ 'Documentation availability varies by plugin.' | translate }}
            </small>
          </p>
       </c8y-ui-empty-state>
      </div>
    </div>
  </div>
  <div class="text-center card-footer p-24 separator">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
      data-cy="install-plugin--cancel-button"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Install' | translate }}"
      type="button"
      (click)="install()"
      [disabled]="selectedPlugins.length === 0"
      data-cy="install-plugin--install-button"
    >
      {{ 'Install' | translate }}
      <span
        class="badge"
        *ngIf="selectedPlugins.length as length"
      >
        {{ length }}
      </span>
    </button>
  </div>