{% load i18n %}

<div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" id="deleteModal">
    <div class="bg-white rounded-2xl shadow-xl max-w-md w-full">
        <div class="bg-gradient-to-br from-red-500 to-[#c53030] text-white rounded-t-2xl p-6">
            <h4 class="text-lg font-bold flex items-center gap-2">
                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                {% trans "Delete Job Posting" %}
            </h4>
        </div>
        <div class="p-6">
            <p class="text-gray-600 mb-4">{% trans "Are you sure you want to delete the job posting" %} "<strong>{{ job.title }}</strong>"?</p>

            <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
                <div class="flex gap-3">
                    <i data-lucide="alert-triangle" class="w-5 h-5 text-amber-600 flex-shrink-0"></i>
                    <div>
                        <strong class="text-amber-800 block">{% trans "This action cannot be undone." %}</strong>
                        <span class="text-amber-700 text-sm">{% trans "All associated data will be permanently removed." %}</span>
                    </div>
                </div>
            </div>

            <form method="post">
                {% csrf_token %}
                <div class="flex gap-3">
                    <a href="{% url 'job_list' %}" class="flex-1 inline-flex items-center justify-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2.5 rounded-xl text-sm transition">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-sm">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                        {% trans "Delete Job" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    lucide.createIcons();
</script>