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

{% block content %}
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <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"><a href="{% url 'chart_of_accounts' %}">{% trans "Chart of Accounts" %}</a></li>
                            <li class="breadcrumb-item active">{% if account %}{% trans "Edit Account" %}{% else %}{% trans "Add Account" %}{% endif %}</li>
                        </ol>
                    </nav>
                    <h2 class="mb-0">{% if account %}{% trans "Edit Account" %}{% else %}{% trans "Add Account" %}{% endif %}</h2>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form method="post">
                        {% csrf_token %}
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">{% trans "Account Code" %}</label>
                                {{ form.code }}
                                {% if form.code.errors %}<div class="text-danger small">{{ form.code.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">{% trans "Account Type" %}</label>
                                {{ form.account_type }}
                                {% if form.account_type.errors %}<div class="text-danger small">{{ form.account_type.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{% trans "Name (English)" %}</label>
                                {{ form.name_en }}
                                {% if form.name_en.errors %}<div class="text-danger small">{{ form.name_en.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{% trans "Name (Arabic)" %}</label>
                                {{ form.name_ar }}
                                {% if form.name_ar.errors %}<div class="text-danger small">{{ form.name_ar.errors }}</div>{% endif %}
                            </div>
                            <div class="col-12">
                                <label class="form-label">{% trans "Description" %}</label>
                                {{ form.description }}
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label">{% trans "Is Active" %}</label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 pt-3 border-top d-flex justify-content-end gap-2">
                            <a href="{% url 'chart_of_accounts' %}" class="btn btn-light">{% trans "Cancel" %}</a>
                            <button type="submit" class="btn btn-primary px-4">{% trans "Save Account" %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
