<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"
    [searchByContextPath]="true"
  >
    <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">
    @if (pluginMarkdown) {
      <div class="card-header separator sticky-top bg-inherit">
        <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">
      @if (pluginMarkdown) {
        <div
          class="markdown-content"
          [innerHTML]="pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async"
        ></div>
      }
      @if (!pluginMarkdown) {
        <c8y-ui-empty-state
          [icon]="'user-manual'"
          [title]="'No plugin selected' | translate"
          [subtitle]="'Select a plugin from the list to view its documentation.' | translate"
          [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 }}
    @if (selectedPlugins.length; as length) {
      <span class="badge">
        {{ length }}
      </span>
    }
  </button>
</div>