{% set active_navbar_item = 'accounts' %}
{% set script_chart_js = true %}

{% extends "base.html" %}

{% block body %}


<table class="uk-table uk-table-divider uk-table-striped uk-table-hover uk-table-small">
  <caption>Summary</caption>
  <tr><th>Micro ID</th><td>{{ account.id | micro_id }}</td></tr>
  <tr><th>Account ID</th><td>{{ account.id }}</td></tr>
  <tr><th>Label</th><td>{{ account.label }}</td></tr>
  <tr><th>Amount</th><td>{{ account.amount | thousand_separator }}</td></tr>
  <tr><th>Account Type</th><td>{{ account.account_type | replace("_", " ") | lower}}</td></tr>
  <tr><th>Last Update</th><td>{{ account.last_update | utc_date }}</td></tr>
  <tr><th>Security</th><td>{{ account.security.symbol }}</td></tr>
</table>

<canvas id="account-history-chart"></canvas>

<script>
  const ctx = document.getElementById('account-history-chart');
  const labels = {{account_history.timestamps | tojson }};
  const datapoints = {{ account_history.amounts | tojson }};
  const data = {
    labels: labels.map(x => new Date(1000 * x)),
    datasets: [
      {
        label: {{ account.id | micro_id | tojson }},
        data: datapoints,
        fill: false,
        tension: 0.4
      }
    ]
  };

  const config = {
    type: 'line',
    data: data,
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Account Amount History'
        },
      },
      interaction: {
        intersect: false,
      },
      scales: {
        x: {
          display: true,
          type: 'time',
          title: {
            display: true
          }
        },
        y: {
          display: true,
          title: {
            display: true,
            text: 'Value'
          },
          suggestedMin: 0,
        }
      }
    },
  };
  new Chart(ctx, config);
</script>

{% endblock %}