{% load i18n %}
{% load django_ledger %}

<div class="table-container">
    <table class="table is-narrow is-fullwidth is-bordered django-ledger-table-bottom-margin-75">
        <thead>
        <tr class="has-text-centered is-error">
            <th>Dated Posted</th>
            <th>Description</th>
            <th>Amount</th>
            <th>Activity</th>
            <th>Entity Unit</th>
            <th>Map To</th>
            <th>TX</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% regroup imported_txs by group_uuid as bundled_groups %}
        {% for group in bundled_groups %}
            <tr class="has-background-light">
                <td colspan="8" class="has-text-weight-bold">
                    {% trans 'Bundle' %} {{ forloop.counter }} —
                    {% trans 'Parent' %}:
                    {% with parent_tx=group.list.0.parent|default:group.list.0 %}
                        {{ parent_tx.date_posted }} · {{ parent_tx.name }} ·
                        {% currency_symbol %}{{ parent_tx.get_amount }}
                        {% if parent_tx.get_activity_display %} · {{ parent_tx.get_activity_display }}{% endif %}
                    {% endwith %}
                    <span class="tag is-info is-light" style="margin-left: .5rem;">
                        {% if group.list.0.is_bundled %}{% trans 'Bundled' %}{% else %}
                            {% trans 'Not Bundled' %}{% endif %}
                    </span>
                </td>
            </tr>
            {% for imported_tx in group.list %}
                <tr id="staged-tx-{{ imported_tx.uuid }}" class="{% if imported_tx.is_children %}is-dark{% endif %}">
                    <td>{{ imported_tx.date_posted }}</td>
                    <td>
                        {% if imported_tx.is_children %}
                            <span class="tag is-primary is-light">{% trans 'Child' %}</span>
                        {% else %}
                            <span class="tag is-dark is-light">{% trans 'Parent' %}</span>
                        {% endif %}
                        {{ imported_tx.name }}
                    </td>
                    <td class="{% if imported_tx.get_amount < 0.00 %}has-text-danger{% endif %} has-text-centered">
                        {% currency_symbol %}{{ imported_tx.get_amount }}</td>
                    <td>{% if imported_tx.activity %}
                        {{ imported_tx.get_activity_display }}
                    {% endif %}</td>
                    <td>{% if imported_tx.entity_unit %}{{ imported_tx.entity_unit }}{% endif %}</td>
                    <td>{{ imported_tx.account_model }}</td>
                    <td>{{ imported_tx.transaction_model }}</td>
                    <td class="has-text-centered">
                        <div class="dropdown is-hoverable is-right">
                            <div class="dropdown-trigger">
                                <button class="button is-small" aria-haspopup="true"
                                        aria-controls="actions-{{ imported_tx.uuid }}">
                                    <span>{% trans 'Actions' %}</span>
                                    <span class="icon is-small">{% icon 'mdi:chevron-down' 14 %}</span>
                                </button>
                            </div>
                            <div class="dropdown-menu" id="actions-{{ imported_tx.uuid }}" role="menu">
                                <div class="dropdown-content">
                                    <a href="{% url 'django_ledger:je-detail' entity_slug=import_job_model.entity_slug ledger_pk=imported_tx.transaction_model.journal_entry.ledger_id je_pk=imported_tx.transaction_model.journal_entry_id %}"
                                       class="dropdown-item">{% trans 'View JE' %}</a>
                                    {% if imported_tx.has_receipt %}
                                        <a href="{% url 'django_ledger:receipt-detail' entity_slug=import_job_model.entity_slug receipt_pk=imported_tx.receiptmodel.uuid %}"
                                           class="dropdown-item">{% trans 'View Receipt' %}</a>
                                    {% endif %}
                                    <hr class="dropdown-divider">
                                    {% if imported_tx.can_undo_import %}
                                        <form method="post"
                                              action="{% url 'django_ledger:data-import-staged-tx-undo' entity_slug=import_job_model.entity_slug job_pk=import_job_model.uuid staged_tx_pk=imported_tx.uuid %}">
                                            {% csrf_token %}
                                            <button type="submit"
                                                    class="dropdown-item has-text-danger">{% trans 'Undo Import' %}</button>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            {% endfor %}
        {% endfor %}
        </tbody>
    </table>
</div>