{% load i18n %}
<table class="listing full-width">
            <colgroup>
            <thead><tr class="table-headers">
                <th class="title">Name</th>
                <th class='issued_on'>Issued on</th>
                <th class="last_updated">Last Updated</th>
                <th class="date">Invoice No.</th>
            </tr></thead>
            <tbody>
            {% for invoice in page %}
                <tr>
                    <td class="title">
                        <h2>
                            <a href="{% url 'wagtailinvoices_edit' pk=invoiceindex.pk invoice_pk=invoice.pk %}">
                                {{invoice}}
                            </a>
                        </h2>
                        <ul class="actions">
                            <li><a href="{% url 'wagtailinvoices_edit' pk=invoiceindex.pk invoice_pk=invoice.pk %}" class="button button-small">{% trans 'Edit' %}</a></li>
                            <li><a href="{% url 'wagtailinvoices_delete' pk=invoiceindex.pk invoice_pk=invoice.pk %}" class="button button-small button-secondary no">{% trans 'Delete' %}</a></li>
                        </ul>
                    </td>
                    <td class='issued'> {{ invoice.issue_date|date:"d M Y H:i"}} </td>
                    <td class='updated'>
                        {% if invoice.last_updated %}
                        <div class="human-readable-date" title="{{ invoice.last_updated|date:"d M Y H:i" }}">
                        {{ invoice.last_updated|timesince }} ago</div>{% endif %}
                    </td>
                    <td class="date">
                        {{ invoice.id }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
</table>
<div class="pagination">
    <p>Page {{page.number}} of {{paginator.num_pages}}</p>
    <ul>
        {% if page.has_previous %}
        <li class="prev">
            
                
                    <a href="?page={{page.previous_page_number}}" class="icon icon-arrow-left">Previous</a>
                
            
        </li>
        {% endif %}
        {% if page.has_next %}
        <li class="next">
            
                
                    <a href="?page={{page.next_page_number}}" class="icon icon-arrow-right-after">Next</a>
                
            
        </li>
        {% endif %}
    </ul>
</div>