{% extends "django_umin/base.html" %}
{% load django_umin_tags %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-lg shadow-lg border border-gray-200 p-6">
        <!-- Icon -->
        <div class="flex items-center justify-center h-16 w-16 rounded-full bg-red-100 mx-auto mb-4">
            <svg class="h-8 w-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>

        <!-- Title -->
        <h2 class="text-2xl font-bold text-gray-900 text-center mb-2">
            Delete {{ count }} {{ model_name }}?
        </h2>

        <!-- Description -->
        <p class="text-gray-600 text-center mb-6">
            Are you sure you want to delete the following items? This action cannot be undone.
        </p>

        <!-- List of items -->
        <div class="mb-6 max-h-80 overflow-y-auto bg-gray-50 rounded-lg p-4">
            <ul class="space-y-2">
                {% for obj in queryset %}
                <li class="py-2 px-3 bg-white rounded border border-gray-200">
                    {{ obj }}
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Actions -->
        <div class="flex gap-3">
            <a href="{% crud_url url_namespace 'list' %}"
               class="flex-1 px-6 py-3 bg-gray-200 text-gray-800 text-center font-medium rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 transition-colors">
                Cancel
            </a>
            <form method="post" class="flex-1">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete_selected">
                <input type="hidden" name="confirm" value="yes">
                {% for obj in queryset %}
                <input type="hidden" name="_selected_action" value="{{ obj.pk }}">
                {% endfor %}
                <button type="submit"
                        class="w-full px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors">
                    Delete {{ count }} Item{{ count|pluralize }}
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}