<div class="Polaris-DatePicker__Header">
  {{polaris-button
    plain=true
    icon="arrow-left"
    accessibilityLabel=previousMonthLabel
    onClick=(action "handleMonthChangeClick" showPreviousMonth showPreviousYear)
  }}

  {{polaris-button
    plain=true
    icon="arrow-right"
    accessibilityLabel=nextMonthLabel
    onClick=(action "handleMonthChangeClick" showNextMonth showNextYear)
  }}
</div>

<div class="Polaris-DatePicker__MonthContainer">
  {{polaris-date-picker/month
    month=month
    year=year
    selected=range
    disableDatesBefore=disableDatesBefore
    disableDatesAfter=disableDatesAfter
    allowRange=allowRange
    hoverDate=hoverDate
    focusedDate=focusDate
    onChange=(action "handleDateSelection")
    onFocus=(action (mut focusDate))
    onHover=(action (mut hoverDate))
  }}

  {{#if multiMonth}}
    {{polaris-date-picker/month
      month=showNextMonth
      year=showNextYear
      selected=range
      disableDatesBefore=disableDatesBefore
      disableDatesAfter=disableDatesAfter
      allowRange=allowRange
      hoverDate=hoverDate
      focusedDate=focusDate
      onChange=(action "handleDateSelection")
      onFocus=(action (mut focusDate))
      onHover=(action (mut hoverDate))
    }}
  {{/if}}
</div>