{% 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">

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

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

            <!-- Warning Banner -->
            <div class="bg-red-50 border-b border-red-300 px-6 py-4 rounded-t-lg">
                <div class="flex items-start gap-3">
                    <span class="text-2xl">⚠️</span>
                    <div>
                        <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 income record.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Income Details -->
            <div class="p-6 space-y-4">
                <p class="text-base text-[color:var(--color-text)] mb-4">
                    Are you sure you want to delete the following record?
                </p>

                <div class="bg-[color:var(--color-bg-muted)] border border-[color:var(--color-border)] rounded-lg p-4 space-y-3">

                    <!-- Description -->
                    <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)]">{{ income.description }}</p>
                    </div>

                    <!-- Amount -->
                    <div>
                        <p class="text-sm font-semibold text-[color:var(--color-text-muted)]">Amount</p>
                        <p class="text-2xl font-bold text-green-700">£{{ income.amount }}</p>
                    </div>

                    <!-- Date + Quarter -->
                    <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)]">{{ income.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)]">{{ income.quarter }}</p>
                        </div>
                    </div>

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

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

                </div>
            </div>

            <!-- Action 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 hover:bg-red-700 rounded font-medium transition">
                        Yes, Delete This Income
                    </button>

                    <a href="{% url 'bookkeeping:income_detail' income.pk %}"
                       class="px-6 py-2 bg-[color:var(--color-primary)] text-white hover:bg-[color:var(--color-accent)]
                              rounded font-medium transition">
                        No, Keep It
                    </a>

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

        </div>

    </div>
</div>

{% endblock %}