<div
  dropdown
  class="c8y-child-assets-selector"
  #datefilter="bs-dropdown"
  placement="bottom left"
  [autoClose]="false"
>
  <button
    id="date-range"
    dropdownToggle
    title="{{ 'Date filter' | translate }}"
    type="button"
    class="btn dropdown-toggle d-flex a-i-center c8y-dropdown"
    aria-controls="dropdown-date-range"
  >
    <i c8yIcon="calendar-o" class="m-r-4 text-primary"></i>
    <span class="text-truncate">
      <span *ngIf="dateFrom">
        <span class="text-label-small">{{ 'From`date`' | translate }}</span>
        {{ dateFrom | date }}
      </span>
      <span *ngIf="dateTo">
        <span class="text-label-small">{{ 'To`date`' | translate }}</span>
        {{ dateTo | date }}
      </span>
      <span *ngIf="!dateFrom && !dateTo">
        {{ 'Filter by date' | translate }}
      </span>
    </span>
  </button>
  <div
    id="dropdown-date-range"
    *dropdownMenu
    class="dropdown-menu"
    role="menu"
    aria-labelledby="date-range"
  >
    <form [formGroup]="fgDatePicker" class="dropdown-form">
      <span class="text-medium m-b-4" translate>Date from</span>
      <c8y-form-group class="datepicker d-block m-b-16" style="max-height: 32px">
        <input
          formControlName="dateFrom"
          class="form-control fit-w text-left"
          placeholder="{{ 'Date from' | translate }}"
          bsDatepicker
          [maxDate]="dateTo"
          (bsValueChange)="dateFrom = $event"
          [bsConfig]="{ customTodayClass: 'today', returnFocusToInput: true }"
        />
      </c8y-form-group>
      <span class="text-medium m-b-4" translate>Date to</span>
      <c8y-form-group class="datepicker m-l-0 d-block" style="max-height: 32px">
        <input
          name="dateTo"
          formControlName="dateTo"
          class="form-control fit-w text-left"
          placeholder="{{ 'Date to' | translate }}"
          bsDatepicker
          [minDate]="dateFrom"
          (bsValueChange)="dateTo = $event"
          [bsConfig]="{ customTodayClass: 'today', returnFocusToInput: true }"
        />
      </c8y-form-group>
      <div class="p-t-24">
        <button
          title="{{ 'Clear selection' | translate }}"
          type="button"
          class="btn btn-default btn-sm"
          (click)="clearFilter(); datefilter.isOpen = !datefilter.isOpen"
        >
          {{ 'Clear`selection`' | translate }}
        </button>
        <button
          [disabled]="!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value"
          title="{{ 'Apply selection' | translate }}"
          type="submit"
          class="btn btn-primary btn-sm"
          (click)="filter(); datefilter.isOpen = !datefilter.isOpen"
        >
          {{ 'Apply`selection`' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>