<form
  class="d-flex a-i-center"
  [formGroup]="formGroup"
>
  <c8y-filter (onSearch)="setFilterTerm($event)"></c8y-filter>

  <div
    *ngIf="predefinedFiltersVisible"
    class="dropdown m-l-8 m-r-4"
    dropdown
    (isOpenChange)="toggleDropdown($event)"
    #filtersDropdown="bs-dropdown"
    [cdkTrapFocus]="filtersDropdown.isOpen"
    [insideClick]="true"
  >
    <div class="input-group d-inline-flex">
      <button
        class="btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto"
        title="{{ 'Filters' | translate }}"
        dropdownToggle
      >
        <span [ngPlural]="chips.length">
          <ng-template ngPluralCase="=0">
            {{ 'Filters' | translate }}
          </ng-template>
          <ng-template ngPluralCase="=1">
            <span class="badge badge-info">{{ chips.length }}</span>
            {{ 'Filter' | translate }}
          </ng-template>
          <ng-template ngPluralCase="other">
            <span class="badge badge-info">{{ chips.length }}</span>
            {{ 'Filters' | translate }}
          </ng-template>
        </span>
        <span class="caret"></span>
      </button>
      <div
        class="input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll"
        *ngIf="chips.length > 0"
      >
        <ng-container *ngFor="let chip of chips">
          <span
            class="tag tag--info chip"
            *ngIf="chip[1].value"
          >
            <button
              class="btn btn-xs btn-clean text-10"
              type="button"
              title="{{ 'Remove' | translate }} {{ chip[0] | translate | titlecase }}"
              (click)="deselectChip(chip)"
            >
              <i c8yIcon="times"></i>
            </button>
            {{ chip[0] | translate | titlecase }}
          </span>
        </ng-container>
      </div>
    </div>
    <div
      class="dropdown-menu"
      *dropdownMenu
    >
      <div class="dropdown-form">
        <c8y-form-group
          *ngIf="packageTypes.length"
          formGroupName="type"
        >
          <label class="m-b-16">
            {{ 'Type' | translate }}
          </label>
          <label
            class="c8y-checkbox"
            *ngFor="let type of packageTypes"
            [title]="type | translate"
          >
            <input
              type="checkbox"
              [formControlName]="type"
              [value]="type"
            />
            <span></span>
            <span>{{ type | translate | titlecase }}</span>
          </label>
        </c8y-form-group>

        <c8y-form-group
          *ngIf="packageAvailabilities.length"
          formGroupName="availability"
        >
          <label class="m-b-16">
            {{ 'Availability`of package based on app state`' | translate }}
          </label>
          <label
            class="c8y-checkbox"
            *ngFor="let availability of packageAvailabilities"
            [title]="availability | translate"
          >
            <input
              type="checkbox"
              [formControlName]="availability"
              [value]="availability"
            />
            <span></span>
            <span>{{ availability | translate }}</span>
          </label>
        </c8y-form-group>

        <c8y-form-group
          *ngIf="packageContents.length"
          formGroupName="content"
        >
          <label class="m-b-16">
            {{ 'Content' | translate }}
          </label>
          <label
            class="c8y-checkbox"
            *ngFor="let content of packageContents"
            [title]="content | translate"
          >
            <input
              type="checkbox"
              [formControlName]="content"
              [value]="content"
            />
            <span></span>
            <span>{{ content | translate }}</span>
          </label>
        </c8y-form-group>
      </div>
      <div class="p-16 d-flex gap-8 separator-top">
        <button
          class="btn btn-default btn-sm flex-grow"
          type="button"
          title="{{ 'Reset' | translate }}"
          (click)="reset(); filtersDropdown.isOpen = false"
        >
          {{ 'Reset' | translate }}
        </button>

        <button
          class="btn btn-primary btn-sm flex-grow"
          type="button"
          title="{{ 'Apply' | translate }}"
          (click)="applyPredefinedFilters(); filtersDropdown.isOpen = false"
          [disabled]="formGroup.pristine && formGroup.untouched"
        >
          {{ 'Apply' | translate }}
        </button>
      </div>
    </div>
  </div>
</form>