<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'plugin'"></i>
    <div
      class="modal-title h4"
      id="modal-title"
      translate
    >
      Available plugins
    </div>
  </div>
  <div class="p-t-8 p-16 text-center separator-bottom flex-no-shrink">
    <p
      class="text-medium m-b-8"
      translate
    >
      Select the compatible plugins to install
    </p>
    <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="modal-inner-scroll"
    id="modal-body"
  >
    <c8y-plugin-list
      class="m-t-16"
      (selectedItems)="selectedPlugins = $event"
      [emptyListText]="'No plugins available' | translate"
      [plugins$]="filteredPlugins$"
      [selectable]="true"
    ></c8y-plugin-list>
  </div>

  <div class="modal-footer">
    <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>
</div>