{% load humanize %}

{% load custom_filters %}

<style>
    .ref-row {
        cursor: pointer;
        color: #0d6efd;
    }

    .ref-row:hover {
        text-decoration: underline;
    }
</style>

<table class="table table-sm table-bordered">

    <thead class="table-light">
        <tr>
            <th>Date</th>
            <th>Ref No</th>
            <th>Account</th>
            <th>Description</th>
            <th class="text-end">Amount</th>
        </tr>
    </thead>

    <tbody>

        {% for r in rows %}

        <tr>
            <td>{{ r.date|date:"d M Y" }}</td>
            <td class="ref-row"
                data-ref="{{ r.ref }}"
                data-acct="{{ r.acct }}">
                {{ r.ref|format_ref_no }}
            </td>
            <td>{{ r.acct|format_acct_no }}</td>
            <td>{{ r.desc }}</td>
            <td class="text-end">{{ r.amount|intcomma }}</td>
        </tr>

        {% endfor %}

        {% if not rows %}
        <tr>
            <td colspan="5" class="text-center text-muted">
                No transaction found
            </td>
        </tr>
        {% endif %}

    </tbody>

</table>