.date-range-picker-container
  if $helpers.showUpsell()
    .upsell-header
      svg-icon(attrs={icon: 'lighting-bolt'})
      .upsell-text
        a.upgrade-link(attrs={href: '/pricing', target: '_blank'}) Upgrade your plan to query beyond #{$helpers.maxHistoryDaysText()}

  .builder-pane-dropdown-container
    mp-builder-dropdown(
      attrs={
        options: JSON.stringify(dateRange.getDateRangeTypeOptions().map(type => $helpers.DATE_RANGE_TYPE_DISPLAY_NAMES[type])),
        'selected-option': $helpers.DATE_RANGE_TYPE_DISPLAY_NAMES[dateRange.type],
      }
      on={
        change: $helpers.changedDateRangeType,
      }
    )
  .date-range-picker
    if [$helpers.DateRangeType.RelativeAfter, $helpers.DateRangeType.RelativeBefore].includes(dateRange.type)
      - const {window} = dateRange
      .relative-range-picker
        input.relative-range-value(
          class={
            'error': dateLimitedError || !Number.isInteger(window.value) || window.value < 1,
          }
          attrs={
            type: `number`,
            value: !Number.isInteger(window.value) ? `` : window.value,
          }
          on={
            mouseenter: $helpers.mouseenterRangeInput,
            mouseleave: $helpers.mouseleaveRangeInput,
            blur: $helpers.blurredRangeInput,
            focus: $helpers.focusedRangeInput,
            change: ev => ev.stopPropagation(),
            input: $helpers.changedRelativeRangeValue,
          }
          hook={insert: vnode => requestAnimationFrame(() => vnode.elm.select())}
          key=dateRange.type
        )
        mp-builder-dropdown(
          attrs={
            options: JSON.stringify(dateRange.getTimeUnitOptions().map(unit => $helpers.TIME_UNIT_DISPLAY_NAMES[unit])),
            'selected-option': $helpers.TIME_UNIT_DISPLAY_NAMES[window.unit],
          }
          on={
            change: $helpers.changedRelativeRangeUnit,
          }
        )
        if dateLimitedError && $helpers.isRangeInputActive()
          mp-tooltip(attrs={
            type: `error`,
            'always-show': true,
            'hide-arrow': true,
          })= $helpers.dateLimitedTooltipText()
    else
      mp-calendar-input(
        attrs=$helpers.filterAttributes({
          from: dateRange.from || ``,
          'max-date': dateRange.getCalendarMaxDate(),
          'max-history-days': $helpers.maxHistoryDays(),
          'is-range': dateRange.type === $helpers.DateRangeType.Between,
          'min-days-apart': 1,
          'show-upsell': $helpers.showUpsell(),
          to: dateRange.to || ``,
        })
        on={
          change: $helpers.changedDates,
          draw: $helpers.propagateEvent,
        }
        key=dateRange.type
        hook={
          insert: $helpers.handleInsertCalendarInput
        }
      )