{% 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 "Chart of Accounts" %}</li>
                </ol>
            </nav>
            <h2 class="mb-0">{% trans "Chart of Accounts" %}</h2>
        </div>
        <a href="{% url 'account_create' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> {% trans "Add Account" %}
        </a>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th>{% trans "Code" %}</th>
                        <th>{% trans "Account Name" %}</th>
                        <th>{% trans "Type" %}</th>
                        <th class="text-end">{% trans "Balance" %}</th>
                        <th class="text-center">{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for account in accounts %}
                    <tr>
                        <td><strong>{{ account.code }}</strong></td>
                        <td>
                            {% if LANGUAGE_CODE == 'ar' %}{{ account.name_ar }}{% else %}{{ account.name_en }}{% endif %}
                        </td>
                        <td>
                            <span class="badge {% if account.account_type == 'asset' %}bg-primary{% elif account.account_type == 'liability' %}bg-danger{% elif account.account_type == 'income' %}bg-success{% elif account.account_type == 'expense' %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
                                {{ account.get_account_type_display }}
                            </span>
                        </td>
                        <td class="text-end">
                            {{ account.balance|floatformat:global_settings.decimal_places }} {{ global_settings.currency_symbol }}
                        </td>
                        <td class="text-center">
                            <div class="btn-group">
                                <a href="{% url 'account_ledger' account.id %}" class="btn btn-sm btn-outline-primary" title="{% trans 'Ledger' %}">
                                    <i class="bi bi-list-columns"></i>
                                </a>
                                <a href="{% url 'account_edit' account.id %}" class="btn btn-sm btn-outline-secondary" title="{% trans 'Edit' %}">
                                    <i class="bi bi-pencil"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}