<div style="display: none;">
    <!-- Cancel Order Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#cancelOrderModal" id="cancelOrderModalBtn">
        Saved Delivery Address Modals
    </button>
</div>

<!-- Cancel order Modals -->
<div class="modal fade" id="cancelOrderModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelOrderModalLabel">Order Cancellation</h5>
                <button type="button" class="btn-close toDisable" data-bs-dismiss="modal" aria-label="Close" id="cancelOrderModalCloseBtn"></button>
            </div>
            <div class="modal-body" id="orderCancelModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark toDisable btn-sm w-25 me-auto toDisable" data-bs-dismiss="modal">Back</button>
                <button type="submit" form="orderCancellationForm" class="btn btn-outline-dark toDisable btn-sm w-25 ms-auto toDisable">
                    <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden id="cancelOrderSpinner"></span>
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>
