{% extends "layout.html" %} {% block title %}Security Prices{% endblock %} {% block content %}
<h1>Security Prices
    <small>for {{ model.symbol }}</small>
</h1>

<div id="chart"></div>

<table class="table table-sm table-striped datatable">
    <thead class="bg-dark text-light">
        <th>Price</th>
        <th>Date</th>
        <th>Currency</th>
        <th>Source</th>
    </thead>
    <tbody>
        {% for item in model.prices %}
        <tr>
            <td class="text-right">
                {{ item.value }}
            </td>
            <td>
                {{ '{:%Y-%m-%d}'.format(item. date) }}
            </td>
            <td>
                {{ item.currency.mnemonic }}
            </td>
            <td>
                {{ item.source }}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% include '_security.links.html' %} {% endblock %} {% block scripts %}
<script type="text/javascript">
    $(function () {
        $("table").DataTable({
            "lengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
            "pageLength": 10,
            "order": [[1, 'desc']]
        });

    });

    // prices
    window.model = {}
    window.model.chartData = {
        labels: [
        {% for item in model.prices %}
            '{{ "{:%Y-%m-%d}".format(item.date) }}',
        {% endfor %}
        ],
        datasets: [
            {
                label: 'Price Chart',
                backgroundColor: '#056571',
                data: [
                    {% for item in model.prices %}
                        {{ item.value }},
                    {% endfor %}
            ]
            }
        ]
    };
</script>
<script type="text/javascript" src="/static/security_prices.js"></script> {% endblock %}