<form #filterForm="ngForm">
  <div class="m-b-8 p-t-8">
    <label>{{ 'Filter by status' | translate }}</label>
    <c8y-form-group class="m-b-0">
      <label class="c8y-checkbox">
        <input type="checkbox" name="active" [(ngModel)]="model.active" />
        <span></span>
        <span>{{ 'Active`tenant`' | translate }}</span>
      </label>
    </c8y-form-group>
    <c8y-form-group class="m-b-0">
      <label class="c8y-checkbox">
        <input type="checkbox" name="suspended" [(ngModel)]="model.suspended" />
        <span></span>
        <span>{{ 'Suspended`tenant`' | translate }}</span>
      </label>
    </c8y-form-group>
  </div>
</form>

<div class="data-grid__dropdown__footer d-flex separator-top">
  <button
    class="btn btn-default btn-sm m-r-8 flex-grow"
    (click)="resetFilter()"
    title="{{ 'Reset' | translate }}"
  >
    {{ 'Reset' | translate }}
  </button>
  <button
    class="btn btn-primary btn-sm flex-grow"
    [disabled]="filterForm.invalid"
    (click)="applyFilter()"
    title="{{ 'Apply' | translate }}"
  >
    {{ 'Apply' | translate }}
  </button>
</div>