<div
  dropdown
  class="c8y-child-assets-selector dropdown"
  #datefilter="bs-dropdown"
  [insideClick]="true"
  placement="bottom left"
  [cdkTrapFocus]="datefilter.isOpen"
  >
  <button
    id="date-range"
    dropdownToggle
    title="{{ 'Date filter' | translate }}"
    type="button"
    class="btn dropdown-toggle d-flex a-i-center c8y-dropdown"
  >
    <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>
      <em *ngIf="!dateFrom && !dateTo" class="text-muted">
        {{ placeholder }}
      </em>
    </span>
  </button>

  <form [formGroup]="fgDatePicker"
    id="dropdown-date-range"
    *dropdownMenu
    class="dropdown-menu">
    <div class="dropdown-form p-b-0">
      <c8y-form-group class="form-group-sm">
        <label for="dateFrom" class="text-medium m-b-4" translate>Date from</label>
        <div class="form-group datepicker d-block m-b-0">
          <input
            id="dateFrom"
            formControlName="dateFrom"
            class="form-control fit-w text-left"
            placeholder="{{ 'Date from' | translate }}"
            bsDatepicker
            [maxDate]="dateTo"
            (bsValueChange)="dateFrom = $event"
            [bsConfig]="{ customTodayClass: 'today', returnFocusToInput: true }"
          />
        </div>
      </c8y-form-group>
      <c8y-form-group class="form-group form-group-sm ">
        <label for="dateTo" translate>Date to</label>
        <div class="form-group datepicker m-l-0 d-block m-b-0 ">
          <input
            name="dateTo"
            id="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 }"
          />
        </div>
      </c8y-form-group>
    </div>
    <div class="p-16 d-flex separator-top gap-8">
      <button
        title="{{ 'Clear selection' | translate }}"
        type="button"
        class="btn btn-default btn-sm flex-grow"
        (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 flex-grow"
        (click)="filter(); datefilter.isOpen = !datefilter.isOpen"
      >
        {{ 'Apply`selection`' | translate }}
      </button>
    </div>
  </form>
</div>