{{-- resources/views/components/admin/confirm-modal.blade.php --}}
{{-- Reusable Bootstrap 5 delete confirmation modal --}}
{{-- confirm-delete.js injects dynamic item name and sets form action --}}

<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered confirm-modal">
        <div class="modal-content confirm-modal__content">

            <div class="modal-header confirm-modal__header">
                <h5 class="modal-title confirm-modal__title" id="confirmDeleteModalLabel">
                    <i class="bi bi-exclamation-triangle-fill confirm-modal__icon"></i>
                    Confirm Delete
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body confirm-modal__body">
                <p class="confirm-modal__message">
                    Are you sure you want to delete
                    <strong class="confirm-modal__item-name" id="confirmItemName">this item</strong>?
                    This action cannot be undone.
                </p>
            </div>

            <div class="modal-footer confirm-modal__footer">
                <button type="button" class="btn-cancel" data-bs-dismiss="modal">
                    Cancel
                </button>
                {{-- Form action is set dynamically by confirm-delete.js --}}
                <form id="confirmDeleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-danger-action">
                        <i class="bi bi-trash3"></i> Delete
                    </button>
                </form>
            </div>

        </div>
    </div>
</div>