<%- # License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later -%>
<form class='pastelBox--grey u-marginBottom--10 u-padding--10 u-centered'>
  <!--= on 'change' (updateChartParams form_object) -->
  <select name='timeSpan' class='select u-width--100 u-margin--0'>
    <option value='day'>Daily</option>
    <option value='week'>Weekly</option>
    <option selected value='month'>Monthly</option>
    <option value='year'>Yearly</option>
  </select>
  records of payments made between
  <input class='u-width--100 u-margin--0' id='js-paymentsChart-startDate' 
  name='startDate' type='text'>
  and
  <input class='input--100 u-margin--0' id='js-paymentsChart-endDate' 
  name='endDate' type='text'>
</form>

<div>
  <canvas id='js-paymentsChart'></canvas>
</div>
<!--= add_class_if loading_chart 'loading--overlay' -->