<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'plugin'"></i>
    <h4 id="modal-title" translate>Available plugins</h4>
  </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>
    <label class="c8y-switch">
      <input type="checkbox" [(ngModel)]="onlyLatestPluginVersion" />
      <span></span><span translate>Only latest version of plugins</span>
    </label>
    <c8y-filter (onSearch)="this.filterTerm$.next($event)"></c8y-filter>
  </div>
  <div class="modal-inner-scroll" id="modal-body">
    <c8y-plugin-list
      (selectedItems)="selectedPlugins = $event"
      [emptyListText]="'No plugins available' | translate"
      [plugins$]="filteredPlugins$ | onlyLatestPluginVersion: !onlyLatestPluginVersion"
      [selectable]="true"
      class="m-t-16"
    ></c8y-plugin-list>
  </div>

  <div class="modal-footer">
    <button
      (click)="cancel()"
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      (click)="install()"
      [disabled]="selectedPlugins.length === 0"
      class="btn btn-primary"
      title="{{ 'Install' | translate }}"
      type="button"
    >
      {{ 'Install' | translate }}
      <span class="badge" *ngIf="selectedPlugins.length as length">{{ length }}</span>
    </button>
  </div>
</div>