<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <table th:if="${#lists != null && #lists.size(storeItems.keySet()) !=  0  }" class="table table-bordered font-sm mb-4" data-order="[[ 0, &quot;desc&quot; ]]" data-account-tables >
                <thead>
                <tr>
                    <th th:each="heading : ${storeItems.keySet()}" th:text="${heading}"></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td th:each="heading : ${storeItems.keySet()}" th:text="${storeItems.get(heading)}"></td>
                </tr>
                </tbody>
            </table>
            <h5 th:if="${#lists.size(storeItems.keySet()) == 0}" class="mt-2">No Items found.</h5>
        </div>
    </div>
</div>
<div th:replace="_fragments :: page-footer-scripts"></div>
<script th:inline="javascript">

    // Initialize DataTables for each individual table
    $('table[data-account-tables]').each(function () {
        const $table = $(this);

        // Prevent reinitializing if already done
        if (!$.fn.DataTable.isDataTable($table)) {
            $table.DataTable({
                paging: false,
                searching: false,
                lengthChange: false,
                info: false,
                dom: 't',
                buttons: [{
                    extend: 'excel',
                    text: '',
                    className: 'bi bi-file-earmark-spreadsheet btn-sm d-none'
                }]
            });
        }

    });

</script>

</body>
</html>