- const isFixedRange = $helpers.isFixedRange()
.calendar-input
  .date-inputs
    mp-date-input.from-date-input(
      class={'focused': focused === `from`}
      attrs={
        error: !!error.from,
        value: from,
      }
      on={
        blur: $helpers.blurredFrom,
        change: isFixedRange ? $helpers.changedFixedRangeFrom : $helpers.changedFrom,
        focus: $helpers.focusedFrom,
        mouseenter: $helpers.mouseenterFrom,
        mouseleave: $helpers.mouseleaveFrom,
      }
    )
    if isRangePicker
      .preposition and
      mp-date-input.to-date-input(
        class={'focused': focused === `to`}
        attrs={
          error: !!error.to,
          value: to,
        }
        on={
          blur: $helpers.blurredTo,
          change: isFixedRange ? $helpers.changedFixedRangeTo : $helpers.changedTo,
          focus: $helpers.focusedTo,
          mouseenter: $helpers.mouseenterTo,
          mouseleave: $helpers.mouseleaveTo,
        }
      )
    if error.from && $helpers.isFromActive()
      mp-tooltip(attrs={
        type: `error`,
        'always-show': true,
        'hide-arrow': true,
      })= error.from
    if error.to && $helpers.isToActive()
      mp-tooltip(attrs={
        type: `error`,
        'always-show': true,
        'hide-arrow': true,
      })= error.to
  .calendars
    mp-calendar(
      attrs=$helpers.getCalendarAttrs()
      on={
        draw: $helpers.propagateEvent,
        selectDate: isFixedRange ? $helpers.selectedFixedRangeDate : $helpers.selectedDate,
      }
    )