{% load django_ledger %}
{% load trans from i18n %}

<div class="table-container">
    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
        <tr>
            <th class="has-text-centered">JE Number</th>
            <th class="has-text-centered">Date</th>
            <th class="has-text-centered">Credit</th>
            <th class="has-text-centered">Debit</th>
            <th class="has-text-centered">Description</th>
            <th class="has-text-centered">Unit</th>
            <th class="has-text-centered">Actions</th>
        </tr>
        {% for tx in transactions %}
            <tr class="has-text-centered">
                <td>{{ tx.journal_entry.je_number }}</td>
                <td>{{ tx.journal_entry.timestamp }}</td>
                <td>{% if tx.tx_type == 'credit' %}{% currency_symbol %}{{ tx.amount | currency_format }}{% endif %}</td>
                <td>{% if tx.tx_type == 'debit' %}{% currency_symbol %}{{ tx.amount | currency_format }}{% endif %}</td>
                <td>{{ tx.description }}</td>
                <td>{{ tx.journal_entry.entity_unit.name }}</td>
                <td>
                    <div class="dropdown is-right is-hoverable" id="tx-action-{{ tx.uuid }}">
                        <div class="dropdown-trigger">
                            <button class="button is-small is-rounded"
                                    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-{{ tx.uuid }}" role="menu">
                            <div class="dropdown-content">
                                {# TODO: These URLs need to be replaced with the future mode method that generates it. #}
                                <a href="{% url 'django_ledger:je-detail' entity_slug=entity_slug ledger_pk=tx.journal_entry.ledger.uuid je_pk=tx.journal_entry.uuid %}"
                                   class="dropdown-item has-text-success">View JE</a>
                                {% if tx.journal_entry.ledger.billmodel %}
                                    <a href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=tx.journal_entry.ledger.billmodel.uuid %}"
                                       class="dropdown-item has-text-primary">View Bill</a>
                                {% elif tx.journal_entry.ledger.invoicemodel %}
                                    <a href="{% url 'django_ledger:invoice-detail' entity_slug=entity_slug invoice_pk=tx.journal_entry.ledger.invoicemodel.uuid %}"
                                       class="dropdown-item has-text-info">View Invoice</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        {% endfor %}
        <tr class="has-text-weight-bold">
            <td></td>
            <td class="has-text-right">Total</td>
            <td class="has-text-centered">{% currency_symbol %}{{ total_credits | currency_format }}</td>
            <td class="has-text-centered">{% currency_symbol %}{{ total_debits | currency_format }}</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
