{% if can_delete %}
    <form method="post" action="{{ delete_action }}" x-data="{ 'showConfirm': false}">
        {% csrf_token %}
        <div class="mt-16 bg-red-100 rounded-lg p-8">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Delete {{ model_name|title }}
            </h3>
            <div class="mt-2 text-sm text-gray-800">
                <p>
                    This action cannot be undone. This will permanently delete the
                    {{ model_name|title }} and all of its data.
                </p>
            </div>
            <div class="mt-8">
                <button type="button" class="btn-important" @click="showConfirm = true;">Delete</button>
            </div>
        </div>

        <!-- Modal -->
        <div class="fixed inset-0 z-10 flex overflow-y-auto"
             role="dialog" aria-modal="true"
             x-show="showConfirm" x-transition.opacity
             x-cloak>
            <div>
                <!-- Background backdrop -->
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
                <div class="fixed inset-0 z-10 overflow-y-auto">
                    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                        <!-- Modal inner -->
                        <div
                                class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:p-6"
                                @click.away="showConfirm = false">
                            <div>
                                <div class="mt-3 text-center sm:mt-5">
                                    <!-- Modal Title -->
                                    <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Are you
                                        sure you want to
                                        delete this {{ model_name|title }}?</h3>
                                    <div class="mt-8 flex justify-center gap-8">
                                        <button type="button" class="btn-secondary" @click="showConfirm = false;">
                                            Cancel
                                        </button>
                                        <button type="submit" class="btn-important">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% else %}
    <div class="mt-16 bg-red-100 rounded-lg p-8">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
            Delete {{ model_name|title }}
        </h3>
        <div class="mt-2 text-sm text-gray-800">
            <p>
                This {{ model_name|title }} cannot be deleted as it is referenced by other records.
            </p>
        </div>
    </div>
{% endif %}