<div class="d-flex gap-8 a-i-center flex-wrap">
  <c8y-form-group
    [ngClass]="[
      parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : '',
      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''
    ]"
    class="form-group-sm"
  >
    <ng-container *ngIf="showLabel">
      <label
        [title]="FROM_DATE | translate"
        [for]="DATE_FROM"
      >
        {{ FROM_DATE | translate }}
      </label>
    </ng-container>
    <c8y-date-time-picker
      id="DATE_FROM"
      [maxDate]="parentFormGroup?.value.dateTo"
      [placeholder]="FROM_DATE | translate"
      [formControl]="parentFormGroup?.controls.dateFrom"
      [ngClass]="parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : ''"
      (ngModelChange)="onDateFromChange($event)"
    ></c8y-date-time-picker>
    <c8y-messages
      class="text-nowrap"
      [show]="parentFormGroup?.controls.dateFrom.errors"
    >
      <c8y-message
        name="dateAfterRangeMax"
        [text]="THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE | translate"
      ></c8y-message>
      <c8y-message
        name="INVALID_DATE_TIME"
        [text]="THIS_DATE_IS_INVALID | translate"
      ></c8y-message>
    </c8y-messages>
  </c8y-form-group>
  <c8y-form-group
    [ngClass]="[
      parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : '',
      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''
    ]"
    class="form-group-sm"
  >
    <ng-container *ngIf="showLabel">
      <label
        [title]="TO_DATE | translate"
        [for]="DATE_TO"
      >
        {{ TO_DATE | translate }}
      </label>
    </ng-container>
    <c8y-date-time-picker
      id="DATE_TO"
      [minDate]="parentFormGroup?.value.dateFrom"
      [placeholder]="TO_DATE | translate"
      [formControl]="parentFormGroup?.controls.dateTo"
      [ngClass]="parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : ''"
      (ngModelChange)="onDateToChange($event)"
    ></c8y-date-time-picker>
    <c8y-messages [show]="parentFormGroup?.controls.dateTo.errors">
      <c8y-message
        name="dateBeforeRangeMin"
        [text]="THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE | translate"
      ></c8y-message>
      <c8y-message
        name="INVALID_DATE_TIME"
        [text]="THIS_DATE_IS_INVALID | translate"
      ></c8y-message>
    </c8y-messages>
  </c8y-form-group>
</div>