@if (form) {
  @let intervalValue = form.get('interval')?.value;
  @let isIntervalNone = intervalValue === 'none';
  @let dateFromControl = form.get('dateFrom');
  @let dateToControl = form.get('dateTo');
  @let dateRangeLabel = getDateRangeLabel();
  @let lifetimeTooltip =
    'No date filter applied — every record is returned regardless of when it occurred.' | translate;
  @let toggleTooltip = isIntervalNone ? lifetimeTooltip : dateRangeLabel;

  <form [formGroup]="form">
    <div
      class="dropdown max-width-100"
      container="body"
      #dropdown="bs-dropdown"
      dropdown
      [insideClick]="true"
      [isDisabled]="disabled"
      (onShown)="onShownDropdown()"
      (onHidden)="onHiddenDropdown()"
    >
      <!-- Dropdown toggle button with better accessibility -->
      <button
        class="dropdown-toggle form-control l-h-tight d-flex a-i-center"
        [attr.aria-label]="toggleTooltip"
        [tooltip]="toggleTooltip"
        placement="top"
        container="body"
        [adaptivePosition]="false"
        [delay]="500"
        dropdownToggle
        data-cy="c8y-date-time-context-picker--picker-toggle"
      >
        <i
          class="m-r-4"
          [c8yIcon]="'schedule1'"
          aria-hidden="true"
        ></i>
        <div class="d-col text-left flex-grow min-width-0">
          @if (isIntervalNone) {
            <span class="text-10 text-muted l-h-1 text-truncate">
              {{ 'All time`interval option`' | translate }}
            </span>
          } @else {
            <span
              class="text-10 text-muted l-h-1 text-truncate"
              data-cy="c8y-date-time-context-picker--picker-label"
            >
              {{ INTERVALS[intervalValue] | translate }}
            </span>
            <span
              class="text-12 l-h-1 text-medium text-truncate"
              data-cy="c8y-date-time-context-picker--picker-time-range"
            >
              {{ form.get('dateFrom')?.value | c8yDate: DATE_FORMAT }} —
              {{ form.get('dateTo')?.value | c8yDate: DATE_FORMAT }}
            </span>
          }
        </div>
        <span
          class="caret m-r-16 m-l-4"
          aria-hidden="true"
        ></span>
      </button>

      <!-- Dropdown menu -->
      <ul
        class="dropdown-menu dropdown-menu--date-range"
        role="menu"
        *dropdownMenu
      >
        @if (dropdown.isOpen) {
          <!-- Interval picker section -->
          <c8y-interval-picker
            class="d-contents"
            formControlName="interval"
            [INTERVALS]="intervalOptions"
            [shouldDisableInterval]="shouldDisableInterval"
          ></c8y-interval-picker>

          <!-- Custom date range section -->
          @if (isCustomMode() && (config?.showDateFrom || config?.showDateTo)) {
            <div class="p-l-16 p-r-16">
              @if (config?.showDateFrom) {
                <c8y-form-group [class.has-error]="getDateFromErrors()">
                  <label
                    [title]="'From`date`' | translate"
                    for="dateFrom"
                    translate
                  >
                    From`date`
                  </label>
                  <c8y-date-time-picker
                    [class.has-error]="getDateFromErrors()"
                    id="dateFrom"
                    [maxDate]="tempDateToControl?.value"
                    [placeholder]="'From`date`' | translate"
                    [formControl]="tempDateFromControl"
                  ></c8y-date-time-picker>
                  <c8y-messages [show]="getDateFromErrors()">
                    <c8y-message
                      name="dateAfterRangeMax"
                      [text]="errorMessages.dateAfterRangeMax | translate"
                    ></c8y-message>
                    <c8y-message
                      name="dateBeforeRangeMin"
                      [text]="errorMessages.dateBeforeRangeMin | translate"
                    ></c8y-message>
                    <c8y-message
                      name="invalidDateTime"
                      [text]="errorMessages.invalidDateTime | translate"
                    ></c8y-message>
                    <c8y-message
                      name="bsDate"
                      [text]="errorMessages.invalidDateTime | translate"
                    ></c8y-message>
                    <c8y-message
                      name="invalidDateRange"
                      [text]="errorMessages.invalidDateRange | translate"
                    ></c8y-message>
                  </c8y-messages>
                </c8y-form-group>
              }

              @if (config?.showDateTo) {
                <c8y-form-group [class.has-error]="getDateToErrors()">
                  <label
                    [title]="'To`date`' | translate"
                    for="dateTo"
                    translate
                  >
                    To`date`
                  </label>
                  <c8y-date-time-picker
                    [class.has-error]="getDateToErrors()"
                    id="dateTo"
                    [minDate]="tempDateFromControl?.value"
                    [placeholder]="'To`date`' | translate"
                    [formControl]="tempDateToControl"
                  ></c8y-date-time-picker>
                  <c8y-messages [show]="getDateToErrors()">
                    <c8y-message
                      name="dateAfterRangeMax"
                      [text]="errorMessages.dateAfterRangeMax | translate"
                    ></c8y-message>
                    <c8y-message
                      name="dateBeforeRangeMin"
                      [text]="errorMessages.dateBeforeRangeMin | translate"
                    ></c8y-message>
                    <c8y-message
                      name="invalidDateTime"
                      [text]="errorMessages.invalidDateTime | translate"
                    ></c8y-message>
                    <c8y-message
                      name="bsDate"
                      [text]="errorMessages.invalidDateTime | translate"
                    ></c8y-message>
                    <c8y-message
                      name="invalidDateRange"
                      [text]="errorMessages.invalidDateRange | translate"
                    ></c8y-message>
                  </c8y-messages>
                </c8y-form-group>
              }
            </div>

            <!-- Action buttons -->
            <div class="p-16 d-flex gap-8 separator-top">
              <button
                class="btn btn-default btn-sm flex-grow"
                title="{{ 'Reset' | translate }}"
                type="button"
                (click)="reset()"
                translate
              >
                Reset
              </button>

              <button
                class="btn btn-primary btn-sm flex-grow"
                title="{{ 'Apply' | translate }}"
                type="button"
                (click)="applyDateTimeContext()"
                [disabled]="isApplyDisabled()"
                translate
              >
                Apply
              </button>
            </div>
          }
        }
      </ul>
    </div>
  </form>
}