{% extends "base.html" %}
{% block content %}

<div class="min-h-screen bg-[color:var(--color-primary-contrast)]">
    <div class="max-w-2xl mx-auto px-4 py-10">

        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-2xl font-bold text-red-600 mb-2">Delete Expense</h1>
            <div class="w-16 h-1 bg-red-600"></div>
        </div>

        <!-- Card -->
        <div class="bg-[color:var(--color-bg)] border border-red-300 rounded shadow-sm">

            <!-- Warning -->
            <div class="bg-red-50 border-b border-red-300 px-6 py-4 rounded-t-lg">
                <p class="font-bold text-red-900">Warning: This action cannot be undone</p>
                <p class="text-sm text-red-700 mt-1">
                    You are about to permanently delete this expense record.
                </p>
            </div>

            <!-- Expense Summary -->
            <div class="p-6 space-y-4">

                <p class="text-base text-[color:var(--color-text)]">
                    Are you sure you want to delete this expense?
                </p>

                <div class="bg-[color:var(--color-bg-muted)] border border-[color:var(--color-border)]
                            rounded-lg p-4 space-y-4">
                    
                    <div>
                        <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Description</p>
                        <p class="text-lg font-bold text-[color:var(--color-text)]">{{ expense.description }}</p>
                    </div>

                    <div>
                        <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Net Amount</p>
                        <p class="text-2xl font-bold text-red-600">£{{ expense.amount }}</p>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">VAT Amount</p>
                            <p class="text-base text-[color:var(--color-text)]">£{{ expense.vat_amount }} ({{ expense.vat_rate }}%)</p>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Total (inc. VAT)</p>
                            <p class="text-base font-semibold text-[color:var(--color-text)]">
                                £{{ expense.amount|add:expense.vat_amount }}
                            </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Date</p>
                            <p class="text-base text-[color:var(--color-text)]">{{ expense.date }}</p>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Quarter</p>
                            <p class="text-base text-[color:var(--color-text)]">{{ expense.quarter }}</p>
                        </div>
                    </div>

                    {% if expense.supplier_name %}
                    <div>
                        <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Supplier</p>
                        <p class="text-base text-[color:var(--color-text)]">{{ expense.supplier_name }}</p>
                    </div>
                    {% endif %}

                    <div>
                        <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Category</p>
                        <p class="text-base text-[color:var(--color-text)]">{{ expense.category.name }}</p>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="bg-[color:var(--color-bg-muted)] px-6 py-4 border-t border-[color:var(--color-border)]
                        rounded-b-lg">
                <form method="post" class="flex items-center gap-4">
                    {% csrf_token %}

                    <button type="submit"
                        class="px-6 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition">
                        Yes, Delete Expense
                    </button>

                    <a href="{% url 'bookkeeping:expense_detail' expense.pk %}"
                       class="px-6 py-2 bg-[color:var(--color-primary)] text-white rounded hover:bg-[color:var(--color-accent)] transition">
                        Cancel
                    </a>

                    <a href="{% url 'bookkeeping:expense_list' %}"
                       class="px-6 py-2 border text-[color:var(--color-text)] rounded hover:bg-[color:var(--color-bg)] transition">
                        Back to List
                    </a>
                </form>
            </div>

        </div>
    </div>
</div>

{% endblock %}
