{% load static %}
<div id="history-table">
<h2>Payment History <img class="in-progress-gif" src="{% static 'img/in-progress.gif' %}" /></h2>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Transaction ID</th>
            <th>Date</th>
            <th>Amount</th>
            
        </tr>
    </thead>
    {% for invoice in customer.invoices.all %}
        <tr>
            <td class="fixed">#{{ invoice.id }}</td>
            <td>{{ invoice.date|date:"M d" }}</td>
            </td>
            <td colspan=2>
                {% if invoice.paid and invoice.total > 0 %}
                    <p>
                        <span class="label label-success">Paid</span> ${{ invoice.total|floatformat:"2" }}
                    </p>
                {% endif %}
                
                {% if invoice.paid and invoice.total < 0 %}
                    <p>
                        <span class="label label-success">Credit</span> ${{ invoice.total|floatformat:"2" }}
                    </p>
                {% endif %}
            </td>
        </tr>
    {% empty %}
        <tr>
            <td colspan="3">
                <img class="in-progress-gif" src="{% static 'img/in-progress.gif' %}" />
            </td>
        </tr>
    {% endfor %}
</table>

</div>