{% 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 "Journal Entries" %}</li>
                </ol>
            </nav>
            <h2 class="mb-0">{% trans "Journal Entries" %}</h2>
        </div>
        <a href="{% url 'manual_journal_entry' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> {% trans "New Manual Entry" %}
        </a>
    </div>

    {% for entry in entries %}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
            <div>
                <span class="text-muted small">{% trans "Date" %}:</span> <strong>{{ entry.date }}</strong>
                <span class="ms-3 text-muted small">{% trans "Reference" %}:</span> <code>{{ entry.reference }}</code>
            </div>
            <div class="text-muted small">#{{ entry.id }}</div>
        </div>
        <div class="card-body">
            <p class="mb-3"><strong>{% trans "Description" %}:</strong> {{ entry.description }}</p>
            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th>{% trans "Account" %}</th>
                            <th class="text-end" style="width: 150px;">{% trans "Debit" %}</th>
                            <th class="text-end" style="width: 150px;">{% trans "Credit" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in entry.items.all %}
                        <tr>
                            <td>
                                {{ item.account.code }} - 
                                {% if LANGUAGE_CODE == 'ar' %}{{ item.account.name_ar }}{% else %}{{ item.account.name_en }}{% endif %}
                            </td>
                            <td class="text-end">
                                {% if item.type == 'debit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %}
                            </td>
                            <td class="text-end">
                                {% if item.type == 'credit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5">
            <p class="text-muted mb-0">{% trans "No journal entries found." %}</p>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}