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

<div class="box">
    <div class="table-container">
        <table class="table is-fullwidth is-narrow is-striped is-hoverable financial-statement django-ledger-table-bottom-margin-75">
            <thead>
            <tr>
                <th>{% trans 'Account' %}</th>
                {% if tx_digest.by_unit %}
                    <th>{% trans 'Unit' %}</th>
                {% endif %}
                <th class="has-text-centered">{% trans 'Type' %}</th>
                <th class="has-text-right">{% trans 'Balance Through' %} {{ tx_digest.to_date | date }}</th>
                <th class="has-text-centered">{% trans 'Actions' %}</th>
            </tr>
            </thead>
            <tbody>
            {% for bs_role, bs_role_data in tx_digest.balance_sheet.items %}
                {% if bs_role_data.is_block %}
                    <tr class="is-selected">
                        <td colspan="{% if tx_digest.by_unit %}5{% else %}4{% endif %}">
                            <h2 class="title is-4 mb-0">{{ bs_role | upper }}</h2>
                        </td>
                    </tr>

                    {% for acc_role, acc_data in bs_role_data.roles.items %}
                        <tr class="has-background-light">
                            <td colspan="{% if tx_digest.by_unit %}5{% else %}4{% endif %}" class="pl-4">
                                <span class="tag is-info is-light has-text-weight-bold">{{ acc_data.role_name | upper }}</span>
                            </td>
                        </tr>

                        {% for acc in acc_data.accounts %}
                            <tr>
                                <td style="padding-left: 2.5rem;">
                                    <div class="is-flex is-align-items-center">
                                        <span class="icon is-small has-text-grey-light mr-1">
                                            {% icon 'bi:arrow-return-right' 16 %}
                                        </span>
                                        <span class="has-text-weight-bold mr-2">{{ acc.code }}</span>
                                        <span>{{ acc.name }}</span>
                                    </div>
                                </td>
                                {% if tx_digest.by_unit %}
                                    <td>
                                        {% if acc.unit_name %}
                                            <span class="tag is-white">{{ acc.unit_name }}</span>
                                        {% endif %}
                                    </td>
                                {% endif %}
                                <td class="has-text-centered">
                                    {% if acc.balance_type == 'debit' %}
                                        <span class="tag is-info is-light">
                                            <span class="icon is-small mr-1">{% icon 'bi:arrow-bar-down' 16 %}</span>
                                            {% trans 'debit' %}
                                        </span>
                                    {% elif acc.balance_type == 'credit' %}
                                        <span class="tag is-success is-light">
                                            <span class="icon is-small mr-1">{% icon 'bi:arrow-bar-up' 16 %}</span>
                                            {% trans 'credit' %}
                                        </span>
                                    {% else %}
                                        <span class="tag is-light">{{ acc.balance_type }}</span>
                                    {% endif %}
                                </td>
                                <td class="has-text-right has-text-weight-semibold">
                                    {% currency_symbol %}{{ acc.balance | currency_format }}
                                </td>
                                <td class="has-text-centered">
                                    <div class="dropdown is-right is-hoverable" id="account-action-{{ acc.account_uuid }}">
                                        <div class="dropdown-trigger">
                                            <button class="button is-small is-rounded is-white"
                                                    aria-haspopup="true"
                                                    aria-controls="dropdown-menu">
                                                <span class="icon is-small">{% icon 'bi:three-dots-vertical' 20 %}</span>
                                            </button>
                                        </div>
                                        <div class="dropdown-menu" id="dropdown-menu-{{ acc.account_uuid }}" role="menu">
                                            <div class="dropdown-content">
                                                <a href="{% url 'django_ledger:account-detail' entity_slug=entity_slug coa_slug=acc.coa_slug account_pk=acc.account_uuid %}"
                                                   class="dropdown-item">
                                                    <span class="icon is-small mr-2">{% icon 'bi:eye' 16 %}</span>
                                                    {% trans 'Detail' %}
                                                </a>
                                                <a href="{% url 'django_ledger:account-update' entity_slug=entity_slug coa_slug=acc.coa_slug account_pk=acc.account_uuid %}"
                                                   class="dropdown-item">
                                                    <span class="icon is-small mr-2">{% icon 'bi:pencil' 16 %}</span>
                                                    {% trans 'Update' %}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}

                        <tr class="has-text-weight-bold">
                            <td class="has-text-right" colspan="{% if tx_digest.by_unit %}3{% else %}2{% endif %}">
                                {{ acc_data.role_name | upper }} {% trans 'TOTAL' %}:
                            </td>
                            <td class="has-text-right" style="border-top: 2px solid grey;">
                                {% currency_symbol %}{{ acc_data.total_balance | currency_format }}
                            </td>
                            <td></td>
                        </tr>
                    {% endfor %}

                    {% if bs_role != 'equity' %}
                        <tr class="has-text-weight-bold is-size-5 has-background-light">
                            <td class="has-text-right" colspan="{% if tx_digest.by_unit %}3{% else %}2{% endif %}">
                                {% trans 'TOTAL' %} {{ bs_role | upper }}
                            </td>
                            <td class="has-text-right">
                                {% currency_symbol %}{{ bs_role_data.total_balance | currency_format }}
                            </td>
                            <td></td>
                        </tr>
                    {% endif %}
                {% endif %}
            {% endfor %}

            <tr class="has-text-weight-bold is-size-5">
                <td class="has-text-right" colspan="{% if tx_digest.by_unit %}3{% else %}2{% endif %}">
                    {% trans 'Retained Earnings' %}
                </td>
                <td class="has-text-right">
                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
                </td>
                <td></td>
            </tr>

            <tr class="has-text-weight-bold is-size-5 has-background-info-light">
                <td class="has-text-right" colspan="{% if tx_digest.by_unit %}3{% else %}2{% endif %}">
                    {% trans 'TOTAL EQUITY' %}
                </td>
                <td class="has-text-right">
                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}
                </td>
                <td></td>
            </tr>
            <tr class="has-text-weight-bold is-size-4 has-background-info has-text-white">
                <td class="has-text-right" colspan="{% if tx_digest.by_unit %}3{% else %}2{% endif %}">
                    {% trans 'TOTAL EQUITY & LIABILITIES' %}
                </td>
                <td class="has-text-right">
                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_LIABILITIES_EQUITY | currency_format }}
                </td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>