{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Delete Acknowledgement" %} - PX360{% endblock %}

{% block content %}
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
    <!-- Header -->
    <div class="flex items-center gap-3 mb-8">
        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl shadow-lg shadow-red-200">
            <i data-lucide="trash-2" class="w-6 h-6 text-white"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-navy">{% trans "Delete Acknowledgement" %}</h1>
            <p class="text-slate text-sm">{% trans "Confirm deletion" %}</p>
        </div>
    </div>

    <!-- Delete Confirmation Card -->
    <div class="max-w-lg mx-auto">
        <div class="bg-white rounded-2xl shadow-lg border border-red-100 overflow-hidden">
            <div class="p-8 text-center">
                <div class="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="alert-triangle" class="w-10 h-10 text-red-500"></i>
                </div>

                <h2 class="text-xl font-bold text-navy mb-2">
                    {% trans "Are you sure?" %}
                </h2>
                <p class="text-slate mb-4">
                    {% trans "You are about to delete:" %}
                </p>
                <p class="text-lg font-semibold text-navy mb-6">
                    "{{ acknowledgement.title }}"
                </p>

                <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
                    <p class="text-sm text-red-700">
                        <i data-lucide="alert-circle" class="w-4 h-4 inline mr-1"></i>
                        {% trans "This action cannot be undone. All signature records for this acknowledgement will also be deleted." %}
                    </p>
                </div>

                <div class="flex gap-3 justify-center">
                    <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
                       class="inline-flex items-center gap-2 px-6 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <form method="post" class="inline">
                        {% csrf_token %}
                        <button type="submit"
                                class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl font-semibold hover:from-red-600 hover:to-red-700 transition shadow-lg shadow-red-200">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                            {% trans "Delete" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}