<form #filterForm="ngForm">
  <div class="m-b-8 p-t-8">
    <label>{{ 'Filter by creation time' | translate }}</label>
    <c8y-form-group
      class="datepicker d-block m-b-16"
      style="max-height: 32px"
    >
      <input
        class="form-control fit-w text-left"
        placeholder="{{ 'Created from`date`' | translate }}"
        name="dateFrom"
        [(ngModel)]="model.dateFrom"
        bsDatepicker
        [bsConfig]="{ customTodayClass: 'today', returnFocusToInput: true }"
        [maxDate]="model.dateTo"
        (onShown)="datepickerShown($event)"
      />
    </c8y-form-group>
    <c8y-form-group
      class="datepicker m-l-0 d-block"
      style="max-height: 32px"
    >
      <input
        class="form-control fit-w text-left"
        placeholder="{{ 'Created to`date`' | translate }}"
        name="dateTo"
        [(ngModel)]="model.dateTo"
        bsDatepicker
        [bsConfig]="{ customTodayClass: 'today', returnFocusToInput: true }"
        [minDate]="model.dateFrom"
        (onShown)="datepickerShown($event)"
      />
    </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"
    title="{{ 'Reset' | translate }}"
    (click)="resetFilter()"
  >
    {{ 'Reset' | translate }}
  </button>
  <button
    class="btn btn-primary btn-sm flex-grow"
    title="{{ 'Apply' | translate }}"
    [disabled]="filterForm.invalid || !(model.dateFrom || model.dateTo)"
    (click)="applyFilter()"
  >
    {{ 'Apply' | translate }}
  </button>
</div>