<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8yIcon="c8y-group-open"></i>
    <h4 id="modal-title">{{ 'Select from inventory' | translate }}</h4>
  </div>
  <div class="modal-inner-scroll">
    <div
      id="modal-body"
      class="bg-component"
    >
      <c8y-asset-selector
        class="d-contents"
        [(ngModel)]="selectedGroups"
        [config]="{
          label: label,
          showFilter: true,
          multi: true,
          groupsSelectable: true,
          columnHeaders: false,
          singleColumn: true,
          groupsOnly: true
        }"
      ></c8y-asset-selector>
    </div>
  </div>

  <div class="modal-footer">
    <button
      class="btn btn-default"
      type="button"
      title="{{ 'Cancel' | translate }}"
      (click)="dismiss()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      type="button"
      title="{{ 'Select' | translate }}"
      (click)="select()"
    >
      {{ 'Select' | translate }}
    </button>
  </div>
</div>