{% extends "layout.html" %}

{% block title %}
    Index
{% endblock %}

{% block main %}
    <table class="table">
        <thead>
            <tr>
                <th class="text-start">Symbol</th>
                <th class="text-end">Name</th>
                <th class="text-end">Shares</th>
                <th class="text-end">Price</th>
                <th class="text-end">Total</th>
            </tr>
        </thead>
        <tbody>
            {% for row in portfolio %}
            <tr>
                <td>{{ row.symbol }}</td>
                <td>{{ row.name }}</td>
                <td>{{ row.amount }}</td>
                <td>{{ row.price }}</td>
                <td>{{ row.total }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td class="border-0 fw-bold text-end" colspan="4">Cash</td>
                <td class="border-0 text-end">{{ cash }}</td>
            </tr>
            <tr>
                <td class="border-0 fw-bold text-end" colspan="4">TOTAL</td>
                <td class="border-0 w-bold text-end">{{ grand_total }}</td>
        </tfoot>
    </table>
{% endblock %}