{% extends 'expenses/base.html' %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block page_title %}
    {% if form.instance.pk %}{% trans 'Edit Expense' %}{% else %}{% trans 'Add New Expense' %}{% endif %}
{% endblock %}

{% block page_actions %}
    <a href="{% url 'expenses:expense_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> {% trans 'Back to List' %}
    </a>
{% endblock %}

{% block expense_content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            {{ form.expense_date|as_crispy_field }}
                        </div>
                        <div class="col-md-6">
                            {{ form.status|as_crispy_field }}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        {{ form.description|as_crispy_field }}
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            {{ form.category|as_crispy_field }}
                        </div>
                        <div class="col-md-6">
                            {{ form.amount|as_crispy_field }}
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            {{ form.payment_method|as_crispy_field }}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        {{ form.notes|as_crispy_field }}
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i> {% trans 'Save' %}
                        </button>
                        
                        {% if form.instance.pk %}
                            <a href="{% url 'expenses:expense_delete' form.instance.pk %}" class="btn btn-outline-danger">
                                <i class="fas fa-trash me-1"></i> {% trans 'Delete' %}
                            </a>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-format amount field
    document.addEventListener('DOMContentLoaded', function() {
        const amountField = document.getElementById('id_amount');
        if (amountField) {
            amountField.addEventListener('blur', function(e) {
                let value = parseFloat(e.target.value);
                if (!isNaN(value)) {
                    e.target.value = value.toFixed(2);
                }
            });
        }
    });
</script>
{% endblock %}