<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /* Custom CSS for full height and center alignment of span */
            .vertical-divider {
                display: flex;
                justify-content: center; /* Center horizontally */
                align-items: center; /* Center vertically */
            }

            .vertical-divider span {
                display: inline-block;
                width: 1px;
                background-color: #dee2e6;
                height: 100%; /* Take full height of the parent div */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <table th:if="${#lists.size(transactions) !=  0 && #lists != null }" class="table table-bordered font-sm">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Item ID</th>
                                <th>Sku</th>
                                <th>Parent Type</th>
                                <th>Piece</th>
                                <th>Type</th>
                                <th>Quantity</th>
                                <th>Balance</th>
                                <th>Notes</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${transaction.getBalance() > -1 }" th:each="transaction : ${transactions}" th:object="${transaction}">
                                <td th:text="*{id}"></td>
                                <td th:text="*{itemId}"></td>
                                <td th:text="*{sku}"></td>
                                <td th:text="*{parentDocumentType}"></td>
                                <td th:text="*{parentDocumentPieceType}"></td>
                                <td th:text="*{type}"></td>
                                <td th:text="*{quantity}"></td>
                                <td th:text="*{balance}"></td>
                                <td class="font-sm font-italic" ><span th:text="*{transaction.notes}"></span><br> by <span th:text="*{transaction.generatedBy}"></span> @ <span ctp:formatdatetime="*{transactionLegDateTime}"></span></td>
                            </tr>
                            <!-- More rows as needed -->
                        </tbody>
                    </table>

                    <h5 th:if="${#lists.size(transactions) == 0}" class="mt-2">No Inventory Transactions found.</h5>
                </div>
            </div>
        </div>
        <div th:replace="_fragments :: page-footer-scripts"></div>
        <script th:inline="javascript">
            (async function () {
                const $selectAllCheckBox = $('[data-checkbox-all]');

                $selectAllCheckBox.change(function () {
                    if ($selectAllCheckBox.prop('checked')) {
                        // When parent checkbox is checked, check all child checkboxes
                        $('[name="parent-doc-type-ids"]').each(function () {
                            let $this = $(this);
                            $this.prop('checked', true);
                        });
                    } else {
                        // When parent checkbox is unchecked, uncheck all child checkboxes
                        $('[name="parent-doc-type-ids"]').each(function () {
                            let $this = $(this);
                            $this.prop('checked', false);
                        });
                    }
                });
            })(jQuery)
        </script>

    </body>
</html>