{% extends 'base.html' %}

{% block content %}
<h3 class="mt-2">ChartJS Demo</h3>


<form id="form" method="GET">
  <div class="d-flex align-items-center justify-content-center mb-3">
    <div class="form-group">
      <div class="form-label">From</div>
      <input type="date" name="from" class="form-control" required>
    </div>
    <div class="form-group ml-2">
      <div class="form-label">To</div>
      <input type="date" name="to" class="form-control" required>
    </div>
    <div class="ml-2 mt-2">
      <button type="submit" class="btn btn-primary">Filter</button>
    </div>
  </div>
</form>

<canvas id="chart1" width="600px" height="150px"></canvas>
<canvas id="chart2" class="mt-3" width="600px" height="150px"></canvas>
<canvas id="chart3" class="mt-3" width="600px" height="150px"></canvas>
<canvas id="chart4" class="mt-3" width="600px" height="150px"></canvas>
<canvas id="chart5" class="mt-3" width="600px" height="150px"></canvas>
{% endblock content %}