{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{% url 'accounting_dashboard' %}">{% trans "Accounting" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Trial Balance" %}</li>
                </ol>
            </nav>
            <h2 class="mb-0">{% trans "Trial Balance" %}</h2>
        </div>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> {% trans "Print Report" %}
        </button>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-bordered align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th>{% trans "Account" %}</th>
                        <th class="text-end" style="width: 200px;">{% trans "Debit" %}</th>
                        <th class="text-end" style="width: 200px;">{% trans "Credit" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for data in trial_data %}
                    <tr>
                        <td>
                            <strong>{{ data.account.code }}</strong> - 
                            {% if LANGUAGE_CODE == 'ar' %}{{ data.account.name_ar }}{% else %}{{ data.account.name_en }}{% endif %}
                        </td>
                        <td class="text-end">
                            {% if data.debit > 0 %}{{ data.debit|floatformat:global_settings.decimal_places }}{% endif %}
                        </td>
                        <td class="text-end">
                            {% if data.credit > 0 %}{{ data.credit|floatformat:global_settings.decimal_places }}{% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="bg-light fw-bold">
                    <tr>
                        <td class="text-end">{% trans "TOTAL" %}</td>
                        <td class="text-end border-top border-dark border-3">{{ total_debit|floatformat:global_settings.decimal_places }}</td>
                        <td class="text-end border-top border-dark border-3">{{ total_credit|floatformat:global_settings.decimal_places }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<style>
@media print {
    .breadcrumb, .btn, .sidebar, .header { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { border: none !important; shadow: none !important; }
}
</style>
{% endblock %}
