{% 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 style="font-family: monospace;">{{ account.id | micro_id }}</td></tr>
  <tr><th>Account ID</th><td style="font-family: monospace;">{{ 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>
  <tr><th>Data</th><td>
    <a href="/data/accounts/{{ account.id }}/amount-history.json">data</a>
  </td></tr>
</table>

<div id="account-history-chart-2" style="width: 100%"></div>

<script>
  var vlSpec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    title: "History of {{ account.id }}",
    "width": "container",
    "height": 250,
    "data": {url: "/data/accounts/{{ account.id }}/amount-history.json",
             format:{
              type: "json",
              property: "snapshots"
             }
            },
    "mark": "line",
    "encoding": {
      "x": {"field": "timestamp", "type": "temporal", title: 'Time'},
      "y": {"field": "amount", "type": "quantitative", title: 'Quantity'}
    }
  };

  // Embed the visualization in the container with id `vis`
  vegaEmbed('#account-history-chart-2', vlSpec);
</script>

{% endblock %}