<form
  class="d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8"
  [formGroup]="form"
>
  <div
    class="dropdown flex-grow"
    #dropDirection="bs-dropdown"
    dropdown
    [insideClick]="true"
  >
    <button
      class="dropdown-toggle form-control l-h-tight d-flex a-i-center"
      attr.aria-label="{{
        (form.value.currentDateContextInterval === 'none'
          ? noFilterLabel
          : (date()?.[0] | c8yDate: DATE_FORMAT) + ' — ' + (date()?.[1] | c8yDate: DATE_FORMAT)
        ) | translate
      }}"
      tooltip="{{
        (form.value.currentDateContextInterval === 'none'
          ? noFilterLabel
          : (date()?.[0] | c8yDate: DATE_FORMAT) + ' — ' + (date()?.[1] | c8yDate: DATE_FORMAT)
        ) | translate
      }}"
      placement="top"
      container="body"
      data-cy="events-date-filter--date-picker-dropdown-button"
      [adaptivePosition]="false"
      [delay]="500"
      dropdownToggle
    >
      <i
        class="m-r-4"
        c8yIcon="schedule1"
      ></i>
      <div class="d-col text-left fit-w">
        <span
          class="text-12"
          data-cy="widget-time-context--selected-interval"
        >
          {{
            INTERVAL_TITLES[form.controls.currentDateContextInterval.value ?? 'none'] | translate
          }}
        </span>
        @if (form.controls.currentDateContextInterval.value !== 'none') {
          <span
            class="text-10 text-muted text-truncate"
            data-cy="events-date-filter--selected-time-range"
          >
            {{ date()?.[0] | c8yDate: DATE_FORMAT }} — {{ date()?.[1] | c8yDate: DATE_FORMAT }}
          </span>
        }
      </div>
      <span class="caret m-r-16 m-l-4"></span>
    </button>

    <ul
      class="dropdown-menu dropdown-menu--date-range"
      *dropdownMenu
    >
      <c8y-interval-picker
        class="d-contents"
        formControlName="currentDateContextInterval"
        [INTERVALS]="INTERVALS"
      ></c8y-interval-picker>

      @if (form.controls.currentDateContextInterval.value === 'custom') {
        <div class="p-l-16 p-r-16">
          <c8y-form-group
            class="m-b-8"
            [class.has-error]="form.controls.temporaryUserSelectedFromDate.errors"
          >
            <label
              [title]="'From`date`' | translate"
              for="temporaryUserSelectedFromDate"
              translate
            >
              From`date`
            </label>
            <c8y-date-time-picker
              [class.has-error]="form.controls.temporaryUserSelectedFromDate.errors"
              id="temporaryUserSelectedFromDate"
              [maxDate]="form.value.temporaryUserSelectedToDate ?? ''"
              [placeholder]="'From`date`' | translate"
              [formControl]="form.controls.temporaryUserSelectedFromDate"
            ></c8y-date-time-picker>
            <c8y-messages [show]="form.controls.temporaryUserSelectedFromDate.errors ?? {}">
              <c8y-message
                name="dateAfterRangeMax"
                [text]="'This date is after the latest allowed date.' | translate"
              ></c8y-message>
              <c8y-message
                name="invalidDateTime"
                [text]="'This date is invalid.' | translate"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>

          <c8y-form-group
            class="m-b-8"
            [class.has-error]="form.controls.temporaryUserSelectedToDate.errors"
          >
            <label
              [title]="'To`date`' | translate"
              for="temporaryUserSelectedToDate"
              translate
            >
              To`date`
            </label>
            <c8y-date-time-picker
              [class.has-error]="form.controls.temporaryUserSelectedToDate.errors"
              id="temporaryUserSelectedToDate"
              [minDate]="form.value.temporaryUserSelectedFromDate ?? ''"
              [placeholder]="'To`date`' | translate"
              [formControl]="form.controls.temporaryUserSelectedToDate"
            ></c8y-date-time-picker>
            <c8y-messages [show]="form.controls.temporaryUserSelectedToDate.errors ?? {}">
              <c8y-message
                name="dateBeforeRangeMin"
                [text]="'This date is before the earliest allowed date.' | translate"
              ></c8y-message>
              <c8y-message
                name="invalidDateTime"
                [text]="'This date is invalid.' | translate"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>

        <div class="p-16 d-flex gap-8 separator-top">
          <button
            class="btn btn-primary btn-sm flex-grow"
            title="{{ 'Apply' | translate }}"
            type="button"
            data-cy="events-date-filter--apply-button"
            (click)="applyDateFilter(); dropDirection.isOpen = false"
            [disabled]="(form.pristine && form.untouched) || form.invalid"
            translate
          >
            Apply
          </button>
        </div>
      }
    </ul>
  </div>
</form>