<fieldset class="c8y-fieldset">
  <legend>{{ 'Time range' | translate }}</legend>
  <c8y-form-group
    class="m-b-8 d-flex gap-4 a-i-center"
    [class]="formGroup().controls.dateFrom.errors ? HAS_ERROR : ''"
  >
    <label
      class="m-b-0 text-truncate"
      style="min-width: 95px"
      [title]="FROM_DATE | translate"
      [for]="DATE_FROM"
    >
      {{ FROM_DATE | translate }}
    </label>
    <div>
      <c8y-date-time-picker
        [class]="formGroup().controls.dateFrom.errors ? HAS_ERROR : ''"
        id="DATE_FROM"
        [maxDate]="formGroup().controls.dateTo.value ?? ''"
        [placeholder]="FROM_DATE | translate"
        [formControl]="formGroup().controls.dateFrom"
      ></c8y-date-time-picker>
      <c8y-messages [show]="formGroup().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>
    </div>
  </c8y-form-group>
  <c8y-form-group
    class="m-b-8 d-flex gap-4 a-i-center"
    [class]="formGroup().controls.dateTo.errors ? HAS_ERROR : ''"
  >
    <label
      class="m-b-0 text-truncate"
      style="min-width: 95px"
      [title]="TO_DATE | translate"
      [for]="DATE_TO"
    >
      {{ TO_DATE | translate }}
    </label>
    <div>
      <c8y-date-time-picker
        [class]="formGroup().controls.dateTo.errors ? HAS_ERROR : ''"
        id="DATE_TO"
        [minDate]="formGroup().controls.dateFrom.value ?? ''"
        [placeholder]="TO_DATE | translate"
        [formControl]="formGroup().controls.dateTo"
      ></c8y-date-time-picker>
      <c8y-messages [show]="formGroup().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>
    </div>
  </c8y-form-group>
</fieldset>