{{define "content"}}
{{$d := .}}
<h1 style="margin-bottom: 24px;">Projections</h1>

<div class="grid">
  <div class="card">
    <h2>Projected Annual Spend</h2>
    <div class="value negative">€{{cents $d.AnnualTotal}}</div>
  </div>
</div>

<div class="card animate-on-scroll">
  <h2>Monthly Average Spend (Last 6 Months)</h2>
  <canvas id="projChart" height="250"></canvas>
</div>

<div class="card table-wrap">
  <table>
    <thead>
      <tr>
        <th>Category</th>
        <th class="text-right">Monthly Avg</th>
        <th class="text-right">Projected Annual</th>
      </tr>
    </thead>
    <tbody>
      {{range $cat, $avg := $d.MonthlyAvg}}
      <tr>
        <td>{{$cat}}</td>
        <td class="cents">€{{printf "%.2f" $avg}}</td>
        <td class="cents">€{{printf "%.2f" (mul $avg 12)}}</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>

<script>
new Chart(document.getElementById('projChart'), {
  type: 'bar',
  data: {
    labels: [{{range $cat, $_ := $d.MonthlyAvg}}"{{$cat}}",{{end}}],
    datasets: [{
      label: 'Monthly Avg (€)',
      data: [{{range $cat, $avg := $d.MonthlyAvg}}{{$avg}},{{end}}],
      backgroundColor: ['#FF6384','#36A2EB','#FFCE56','#4BC0C0','#9966FF','#FF9F40','#C9CBCF','#00E676','#651FFF','#FF6F00','#E91E63','#607D8B','#3F51B5','#9E9E9E'],
      borderColor: ['#FF6384','#36A2EB','#FFCE56','#4BC0C0','#9966FF','#FF9F40','#C9CBCF','#00E676','#651FFF','#FF6F00','#E91E63','#607D8B','#3F51B5','#9E9E9E'],
      borderWidth: 1,
      borderRadius: 4,
      borderSkipped: false,
    }]
  },
  options: {
    responsive: true,
    animation: { duration: 1200, easing: 'easeOutQuart' },
    plugins: { legend: { display: false } },
    scales: {
      y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { callback: v => '€' + v } },
      x: { grid: { display: false } }
    }
  }
});
</script>
{{end}}