{% extends "djust_admin/base.html" %}
{% load djust_admin_tags %}

{% block breadcrumb_items %}
<span class="mx-2 text-gray-400">/</span>
<a href="{% url admin_site_name|add:':'|add:opts.app_label|add:'_'|add:opts.model_name|add:'_changelist' %}"
   class="text-gray-500 hover:text-gray-700">{{ opts.verbose_name_plural|title }}</a>
<span class="mx-2 text-gray-400">/</span>
<span class="text-gray-700">Delete</span>
{% endblock %}

{% block content %}
<!-- Redirect after deletion -->
{% if redirect_url %}
<script>window.location.href = "{{ redirect_url }}";</script>
{% endif %}

<div class="max-w-2xl mx-auto">
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-12 w-12 text-red-400" 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>
                <div class="ml-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        Delete {{ opts.verbose_name }}
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Are you sure you want to delete "{{ object_str }}"?
                    </p>
                </div>
            </div>

            <div class="mt-6">
                <p class="text-sm text-gray-500">
                    This action cannot be undone. This will permanently delete the {{ opts.verbose_name }}
                    and all related data.
                </p>
            </div>
        </div>

        <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-end space-x-3">
            <a href="{{ list_url }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Cancel
            </a>
            <button type="button"
                    dj-click="confirm_delete()"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                    {% if is_deleting %}disabled{% endif %}>
                {% if is_deleting %}
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Deleting...
                {% else %}
                Yes, delete
                {% endif %}
            </button>
        </div>
    </div>
</div>
{% endblock %}