{% load django_umin_tags %}
<!-- Bulk delete confirmation modal (HTMX partial) -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" 
     x-data="{ show: true }" 
     x-show="show"
     @click.self="show = false; document.body.dispatchEvent(new CustomEvent('htmx:afterSwap'))">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-96 shadow-lg rounded-lg bg-white">
        <div class="mt-3">
            <!-- Icon -->
            <div class="flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mx-auto">
                <svg class="h-6 w-6 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 -->
            <h3 class="text-lg leading-6 font-medium text-gray-900 text-center mt-4">
                Delete {{ count }} {{ model_name }}?
            </h3>

            <!-- Description -->
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500 text-center">
                    Are you sure you want to delete the following items? This action cannot be undone.
                </p>

                <!-- List of items to be deleted -->
                <div class="mt-4 max-h-60 overflow-y-auto">
                    <ul class="text-sm text-gray-700 space-y-1">
                        {% for obj in queryset %}
                        <li class="py-1 px-2 bg-gray-50 rounded">{{ obj }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- Actions -->
            <div class="items-center px-4 py-3 flex gap-2">
                <button @click="show = false; document.getElementById('action-form').reset()"
                        class="flex-1 px-4 py-2 bg-gray-200 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    Cancel
                </button>
                <form id="delete-confirm-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-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>