{% load django_ledger %}
{% load i18n %}
<div class="table-container">
    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
        <thead>
            <tr>
                <th>Invoice Number</th>
                <th>Invoice Date</th>
                <th>Invoiced To</th>
                <th>Amount</th>
                <th>Payments</th>
                <th>Is Paid?</th>
                <th>Past Due?</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for invoice in invoices %}
                <tr>
                    <td>{{ invoice.invoice_number }}</td>
                    <td>{{ invoice.date }}</td>
                    <td>{{ invoice.customer.customer_name }}</td>
                    <td>${{ invoice.amount_due | currency_format }}</td>
                    <td>${{ invoice.amount_paid | currency_format }}</td>
                    <td>
                        {% if invoice.paid %}
                            <span class="icon is-small has-text-success">{% icon 'bi:check-circle-fill' 24 %}</span>
                        {% else %}
                            <span class="icon is-small has-text-danger">{% icon 'clarity:no-access-solid' 24 %}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if invoice.is_past_due %}
                            <span class="icon is-small has-text-success">{% icon 'bi:check-circle-fill' 24 %}</span>
                        {% else %}
                            <span class="icon is-small has-text-danger">{% icon 'clarity:no-access-solid' 24 %}</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="dropdown is-right is-hoverable" id="invoice-action-{{ invoice.uuid }}">
                            <div class="dropdown-trigger">
                                <button class="button is-small is-rounded is-outlined is-dark"
                                        aria-haspopup="true"
                                        aria-controls="dropdown-menu">
                                    <span>{% trans 'Actions' %}</span>
                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
                                </button>
                            </div>
                            <div class="dropdown-menu" id="dropdown-menu-{{ invoice.uuid }}" role="menu">
                                <div class="dropdown-content">
                                    <a href="{% url 'django_ledger:invoice-detail' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
                                       class="dropdown-item has-text-success">
                                        Details
                                    </a>
                                    <a href="{% url 'django_ledger:invoice-update' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
                                       class="dropdown-item has-text-success">
                                        Update
                                    </a>
                                    {% if not invoice.paid %}
                                        <a onclick="djLedger.showModal('{{ invoice.get_html_id }}')"
                                           class="dropdown-item has-text-weight-bold has-text-info">
                                            {% trans 'Mark as Paid' %}
                                        </a>
                                        {% mark_as_paid invoice entity_slug %}
                                    {% endif %}
                                    <a href="{% url 'django_ledger:invoice-delete' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
                                       class="dropdown-item has-text-weight-bold has-text-danger">
                                        {% trans ' Delete' %}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
